@gitlab/duo-ui 14.0.0 → 14.1.1

package/dist/components/chat/mock_data.js

@@ -179,6 +179,21 @@ const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_MERGE_REQUEST = {
   status: 'success',
   role: 'request'
 };
+const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_UPDATE_MERGE_REQUEST = {
+  id: '125',
+  content: 'Tool update_merge_request requires approval. Please confirm if you want to proceed.',
+  message_type: MESSAGE_MODEL_ROLES.request,
+  tool_info: {
+    name: 'update_merge_request',
+    args: {
+      url: 'https://gitlab.com/gitlab-org/editor-extensions/gitlab-language-server/-/merge_requests/123',
+      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'
+};
 const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND = {
   id: '125',
   content: 'Tool run_command requires approval. Please confirm if you want to proceed.',
@@ -386,7 +401,8 @@ const MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_WORK_ITEM = {
       type_name: 'Issue',
       description: '## Overview\n\nUsers have requested the ability to toggle between light and dark modes in the chat interface to improve usability in different lighting conditions.\n\n## Requirements\n\n- [ ] Add a toggle button in the chat header\n- [ ] Implement theme switching logic\n- [ ] Persist user preference in localStorage\n- [ ] Ensure all chat components support both themes\n- [ ] Update existing CSS variables for dark mode\n\n## Acceptance Criteria\n\n- Toggle button is visible and accessible\n- Theme changes are applied immediately\n- User preference is remembered across sessions\n- All text remains readable in both modes\n- Icons and UI elements adapt to the selected theme',
       labels: ['enhancement', 'ui', 'accessibility'],
-      assignee_ids: [123]
+      assignee_ids: [123],
+      confidential: true
     }
   },
   timestamp: '2025-06-25T19:22:21.290791+00:00',
@@ -771,4 +787,4 @@ const AGENTIC_THREADLIST = [{
   }
 }];
 
-export { AGENTIC_THREADLIST, INCLUDE_SLASH_COMMAND, MOCK_AGENT_MESSAGE, MOCK_REQUEST_MESSAGE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT_AUTO_BRANCH, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT_MESSAGE_ONLY, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT_OLD_NEW_CONTENT, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_EPIC, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_ISSUE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_ISSUE_NOTE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_MERGE_REQUEST, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_MERGE_REQUEST_NOTE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_WORK_ITEM, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_WORK_ITEM_NOTE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_PARAMS, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND_WITH_RESPONSE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_GIT_COMMAND, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_UPDATE_ISSUE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_UPDATE_WORK_ITEM, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_TOOL_MESSAGE, MOCK_TOOL_MESSAGE_WITH_LINK, MOCK_TOOL_MESSAGE_WITH_REQUEST_AND_RESPONSE_DETAILS, MOCK_USER_PROMPT_MESSAGE, MOCK_WORKFLOW_END_MESSAGE, SLASH_COMMANDS, THREADLIST, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };
+export { AGENTIC_THREADLIST, INCLUDE_SLASH_COMMAND, MOCK_AGENT_MESSAGE, MOCK_REQUEST_MESSAGE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT_AUTO_BRANCH, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT_MESSAGE_ONLY, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_COMMIT_OLD_NEW_CONTENT, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_EPIC, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_ISSUE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_ISSUE_NOTE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_MERGE_REQUEST, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_MERGE_REQUEST_NOTE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_WORK_ITEM, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_CREATE_WORK_ITEM_NOTE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_PARAMS, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_COMMAND_WITH_RESPONSE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_RUN_GIT_COMMAND, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_UPDATE_ISSUE, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_UPDATE_MERGE_REQUEST, MOCK_REQUEST_MESSAGE_WITH_TOOL_APPROVAL_UPDATE_WORK_ITEM, MOCK_RESPONSE_MESSAGE, MOCK_RESPONSE_MESSAGE_FOR_STREAMING, MOCK_TOOL_MESSAGE, MOCK_TOOL_MESSAGE_WITH_LINK, MOCK_TOOL_MESSAGE_WITH_REQUEST_AND_RESPONSE_DETAILS, MOCK_USER_PROMPT_MESSAGE, MOCK_WORKFLOW_END_MESSAGE, SLASH_COMMANDS, THREADLIST, generateMockResponseChunks, generateSeparateChunks, renderGFM, renderMarkdown };

package/dist/components/chat/web_duo_chat.js

@@ -631,7 +631,7 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"markdown-code-block duo-chat web-only gl-bottom-0 gl-flex gl-max-h-full gl-flex-col",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('web-duo-chat-header',{ref:"header",attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"subtitle":_vm.activeThreadTitleForView,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType,"show-studio-header":_vm.showStudioHeader},on:{"go-back":_vm.onGoBack,"go-back-to-chat":_vm.onGoBackToChat,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit",attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingThrottled}},[(_vm.shouldShowThreadList)?_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}}):_c('transition-group',{staticClass:"duo-chat-history gl-mt-auto gl-px-4 gl-pb-4 gl-pt-6",attrs:{"mode":"out-in","tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0,"trusted-urls":_vm.trustedUrls},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-message",staticClass:"duo-chat-message gl-rounded-bl-none gl-leading-20 gl-text-gray-900 gl-break-anywhere",attrs:{"data-testid":"gl-duo-chat-empty-state"}},[(_vm.emptyStateTitle)?[_c('div',{staticClass:"gl-heading-display"},[_vm._v("👋")]),_vm._v(" "),_c('p',{staticClass:"gl-m-0",attrs:{"data-testid":"gl-duo-chat-empty-state-title"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateTitle)+"\n            ")])]:_vm._e(),_vm._v(" "),_c('duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})],2)]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(_vm.isChatAvailable && !_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0",attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('div',{staticClass:"gl-relative gl-max-w-full"},[_vm._t("context-items-menu",null,{"isOpen":_vm.contextItemsMenuIsOpen,"onClose":_vm.closeContextItemsMenuOpen,"setRef":_vm.setContextItemsMenuRef,"focusPrompt":_vm.focusChatInput})],2),_vm._v(" "),_c('div',{staticClass:"duo-chat-input 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 forced-colors:gl-border"},[_c('div',{staticClass:"gl-flex gl-justify-between gl-border-0 gl-border-b-1 gl-border-solid gl-border-strong gl-px-4 gl-py-4 forced-colors:gl-border-none"},[_c('div',[_vm._v(_vm._s(_vm.$options.i18n.CHAT_MODEL_PLACEHOLDER))]),_vm._v(" "),_c('div',[_vm._t("agentic-switch")],2)]),_vm._v(" "),_c('div',{staticClass:"gl-h-[80px] gl-grow",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-subtle"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",attrs:{"data-testid":"chat-prompt-input","textarea-classes":[
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"markdown-code-block duo-chat web-only gl-bottom-0 gl-flex gl-max-h-full gl-flex-col",attrs:{"id":"chat-component","role":"complementary","data-testid":"chat-component"}},[(_vm.showHeader)?_c('web-duo-chat-header',{ref:"header",attrs:{"active-thread-id":_vm.activeThreadId,"title":_vm.isMultithreaded && _vm.currentView === 'list' ? _vm.$options.i18n.CHAT_HISTORY_TITLE : _vm.title,"subtitle":_vm.activeThreadTitleForView,"is-multithreaded":_vm.isMultithreaded,"current-view":_vm.currentView,"should-render-resizable":_vm.shouldRenderResizable,"badge-type":_vm.isMultithreaded ? null : _vm.badgeType,"show-studio-header":_vm.showStudioHeader},on:{"go-back":_vm.onGoBack,"go-back-to-chat":_vm.onGoBackToChat,"new-chat":_vm.onNewChat,"close":_vm.hideChat},scopedSlots:_vm._u([{key:"subheader",fn:function(){return [_vm._t("subheader")]},proxy:true}],null,true)}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit",class:{ 'gl-border-t': !_vm.showStudioHeader },attrs:{"data-testid":"chat-history"},on:{"scroll":_vm.handleScrollingThrottled}},[(_vm.shouldShowThreadList)?_c('duo-chat-threads',{attrs:{"threads":_vm.threadList,"preferred-locale":_vm.preferredLocale},on:{"new-chat":_vm.onNewChat,"select-thread":_vm.onSelectThread,"delete-thread":_vm.onDeleteThread,"close":_vm.hideChat}}):_c('transition-group',{staticClass:"duo-chat-history gl-mt-auto gl-px-4 gl-pb-4 gl-pt-6",attrs:{"mode":"out-in","tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0,"trusted-urls":_vm.trustedUrls},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"copy-code-snippet":_vm.onCopyCodeSnippet,"copy-message":_vm.onCopyMessage,"get-context-item-content":_vm.onGetContextItemContent,"open-file-path":_vm.onOpenFilePath}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('div',{key:"empty-state-message",staticClass:"duo-chat-message gl-rounded-bl-none gl-leading-20 gl-text-gray-900 gl-break-anywhere",attrs:{"data-testid":"gl-duo-chat-empty-state"}},[(_vm.emptyStateTitle)?[_c('div',{staticClass:"gl-heading-display"},[_vm._v("👋")]),_vm._v(" "),_c('p',{staticClass:"gl-m-0",attrs:{"data-testid":"gl-duo-chat-empty-state-title"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateTitle)+"\n            ")])]:_vm._e(),_vm._v(" "),_c('duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})],2)]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('duo-chat-loader',{key:"loader",attrs:{"tool-name":_vm.toolName}}):_vm._e(),_vm._v(" "),_c('div',{key:"anchor",ref:"anchor",staticClass:"scroll-anchor"})],2)],1),_vm._v(" "),(_vm.isChatAvailable && !_vm.shouldShowThreadList)?_c('footer',{staticClass:"duo-chat-drawer-footer gl-relative gl-z-2 gl-shrink-0",attrs:{"data-testid":"chat-footer"}},[_c('gl-form',{attrs:{"data-testid":"chat-prompt-form"},on:{"submit":function($event){$event.stopPropagation();$event.preventDefault();return _vm.sendChatPrompt.apply(null, arguments)}}},[_c('div',{staticClass:"gl-relative gl-max-w-full"},[_vm._t("context-items-menu",null,{"isOpen":_vm.contextItemsMenuIsOpen,"onClose":_vm.closeContextItemsMenuOpen,"setRef":_vm.setContextItemsMenuRef,"focusPrompt":_vm.focusChatInput})],2),_vm._v(" "),_c('div',{staticClass:"duo-chat-input 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 forced-colors:gl-border"},[_c('div',{staticClass:"gl-flex gl-justify-between gl-border-0 gl-border-b-1 gl-border-solid gl-border-strong gl-px-4 gl-py-4 forced-colors:gl-border-none"},[_c('div',[_vm._v(_vm._s(_vm.$options.i18n.CHAT_MODEL_PLACEHOLDER))]),_vm._v(" "),_c('div',[_vm._t("agentic-switch")],2)]),_vm._v(" "),_c('div',{staticClass:"gl-h-[80px] gl-grow",attrs:{"data-value":_vm.prompt}},[(_vm.shouldShowSlashCommands)?_c('gl-card',{ref:"commands",staticClass:"slash-commands !gl-absolute gl-w-full -gl-translate-y-full gl-list-none gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2"}},_vm._l((_vm.filteredSlashCommands),function(command,index){return _c('gl-dropdown-item',{key:command.name,class:{ 'active-command': index === _vm.activeCommandIndex },on:{"click":function($event){return _vm.selectSlashCommand(index)}},nativeOn:{"mouseenter":function($event){_vm.activeCommandIndex = index;}}},[_c('span',{staticClass:"gl-flex gl-justify-between"},[_c('span',{staticClass:"gl-block"},[_vm._v(_vm._s(command.name))]),_vm._v(" "),_c('small',{staticClass:"gl-pl-3 gl-text-right gl-italic gl-text-subtle"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",attrs:{"data-testid":"chat-prompt-input","textarea-classes":[
               '!gl-h-full',
               '!gl-bg-transparent',
               '!gl-py-4',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/duo-ui",
-  "version": "14.0.0",
+  "version": "14.1.1",
   "description": "Duo UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/agentic_chat/web_agentic_duo_chat.vue

@@ -840,6 +840,7 @@ export default {
     </web-duo-chat-header>
 
     <div
+      :class="{ 'gl-border-t': !showStudioHeader }"
       class="gl-flex gl-flex-1 gl-flex-grow gl-flex-col gl-overflow-y-auto gl-overscroll-contain gl-bg-inherit"
       data-testid="chat-history"
       @scroll="handleScrollingThrottled"

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

@@ -173,7 +173,7 @@ export default {
 </script>
 
 <template>
-  <header data-testid="chat-header" class="gl-border-b gl-shrink-0 gl-p-0">
+  <header data-testid="chat-header" class="gl-shrink-0 gl-p-0">
     <div
       v-if="!showStudioHeader"
       class="gl-flex gl-w-full gl-items-center gl-px-4 gl-py-3"
@@ -213,7 +213,8 @@ export default {
     </div>
     <div
       v-if="showSubheader"
-      class="drawer-title gl-border-t gl-flex gl-items-center gl-justify-start gl-gap-4 gl-px-4 gl-py-3"
+      class="drawer-title gl-flex gl-items-center gl-justify-start gl-gap-4 gl-px-4 gl-py-3"
+      :class="{ 'gl-border-t': !showStudioHeader, 'gl-border-b': showStudioHeader }"
       data-testid="chat-subheader"
     >
       <div class="gl-flex gl-grow gl-gap-3">

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

@@ -1,14 +1,68 @@
 <script>
-import { GlAccordion, GlAccordionItem, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import { GlAccordion, GlAccordionItem, GlBadge, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
 import { translate } from '../../../../../utils/i18n';
 import PreBlock from './pre_block.vue';
+import ToolParamsJsonView from './tool_params_json_view.vue';
+
+const projectLabel = translate('BaseToolParams.projectLabel', 'Project');
+const groupLabel = translate('BaseToolParams.groupLabel', 'Group');
+const issueLabel = translate('BaseToolParams.issueLabel', 'Issue');
+const mergeRequestLabel = translate('BaseToolParams.mergeRequestLabel', 'Merge request');
+const workItemLabel = translate('BaseToolParams.workItemLabel', 'Work item');
+const epicLabel = translate('BaseToolParams.epicLabel', 'Epic');
+const sourceBranchLabel = translate('BaseToolParams.sourceBranchLabel', 'Source branch');
+const targetBranchLabel = translate('BaseToolParams.targetBranchLabel', 'Target branch');
+const startDateLabel = translate('BaseToolParams.startDateLabel', 'Start date');
+const dueDateLabel = translate('BaseToolParams.dueDateLabel', 'Due date');
+const healthStatusLabel = translate('BaseToolParams.healthStatusLabel', 'Health status');
+const labelsLabel = translate('BaseToolParams.labelsLabel', 'Labels');
+const vulnerabilityLabel = translate('BaseToolParams.vulnerabilityLabel', 'Vulnerability');
+const dismissalReasonLabel = translate('BaseToolParams.dismissalReasonLabel', 'Dismissal reason');
+const stateLabel = translate('BaseToolParams.stateLabel', 'State');
+const confidentialLabel = translate('BaseToolParams.confidentialLabel', 'Confidential');
+const typeLabel = translate('BaseToolParams.typeLabel', 'Type');
+
+const metadataProperties = {
+  projectId: {
+    icon: 'project',
+    label: projectLabel,
+  },
+  projectPath: { icon: 'project', label: projectLabel },
+  projectFullPath: { icon: 'project', label: projectLabel },
+  groupId: { icon: 'group', label: groupLabel },
+  groupPath: { icon: 'group', label: groupLabel },
+  issueId: { icon: 'issues', label: issueLabel },
+  issueIid: { icon: 'issues', label: issueLabel },
+  mergeRequestId: { icon: 'merge-request', label: mergeRequestLabel },
+  mergeRequestIid: { icon: 'merge-request', label: mergeRequestLabel },
+  workItemIid: { icon: 'work-items', label: workItemLabel },
+  epicIid: { icon: 'epics', label: epicLabel },
+  sourceBranch: { icon: 'branch', label: sourceBranchLabel },
+  targetBranch: { icon: 'branch', label: targetBranchLabel },
+  url: { icon: 'external-link', type: 'url' },
+  startDate: { icon: 'calendar', label: startDateLabel },
+  dueDate: { icon: 'calendar', label: dueDateLabel },
+  healthStatus: { icon: 'status-health', label: healthStatusLabel },
+  state: {
+    label: stateLabel,
+    icon: (value) => (value === 'opened' ? 'status_open' : 'status_closed'),
+  },
+  labels: { icon: 'labels', label: labelsLabel },
+  addLabelIds: { icon: 'labels', label: labelsLabel },
+  confidential: { icon: (value) => (value ? 'eye-slash' : 'eye'), label: confidentialLabel },
+  typeName: { icon: (value) => `work-item-${value.toLowerCase()}`, label: typeLabel },
+  vulnerabilityId: { label: vulnerabilityLabel },
+  dismissalReason: { icon: 'information', label: dismissalReasonLabel },
+};
 
 export default {
   name: 'BaseToolParams',
   components: {
     GlAccordion,
     GlAccordionItem,
+    GlBadge,
     PreBlock,
+    ToolParamsJsonView,
   },
   directives: {
     SafeHtml,
@@ -24,32 +78,106 @@ export default {
       required: false,
       default: '',
     },
+    toolParams: {
+      type: Object,
+      required: false,
+      default: () => {},
+    },
     customAccordionTitle: {
       type: String,
       required: false,
       default: '',
     },
+    withJsonView: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     accordionTitle() {
-      return this.customAccordionTitle || this.$options.i18n.ACCORDION_TITLE;
+      return this.customAccordionTitle || this.$options.i18n.DESCRIPTION_ACCORDION_TITLE;
+    },
+    metadataProperties() {
+      const toolParams = this.toolParams || {};
+
+      return Object.entries(metadataProperties)
+        .filter(([property]) => toolParams[property])
+        .map(([property, styles]) => ({
+          key: property,
+          value: toolParams[property],
+          ...styles,
+        }));
+    },
+    hasMetadataProperties() {
+      return this.metadataProperties.length > 0;
+    },
+  },
+  methods: {
+    formatPropertyValue(value) {
+      if (Array.isArray(value)) {
+        return value.join(', ');
+      }
+
+      if (typeof value === 'boolean') {
+        return value ? translate('Yes', 'Yes') : translate('No', 'No');
+      }
+
+      return value;
+    },
+    processPropertyIcon(icon, propertyValue) {
+      if (typeof icon === 'function') {
+        return icon(propertyValue);
+      }
+      return icon;
     },
   },
   i18n: {
-    ACCORDION_TITLE: translate('BaseToolParams.ACCORDION_TITLE', 'Read description'),
+    DESCRIPTION_ACCORDION_TITLE: translate(
+      'BaseToolParams.ExpandDescriptionTitle',
+      'Read description'
+    ),
+    EXPAND_JSON_VIEW_TITLE: translate(
+      'BaseToolParams.ExpandJsonViewTitle',
+      'See request parameters as JSON'
+    ),
   },
 };
 </script>
 <template>
-  <div class="gl-flex gl-flex-col">
+  <div class="gl-flex gl-flex-col gl-gap-3">
+    <div v-if="hasMetadataProperties" class="gl-flex gl-flex-wrap gl-gap-2">
+      <span v-for="property in metadataProperties" :key="property.key" class="gl-overflow-hidden">
+        <gl-badge
+          v-if="property.type == 'url'"
+          :icon="property.icon"
+          :href="property.value"
+          :title="property.value"
+        >
+          <span class="gl-truncate">
+            {{ property.value }}
+          </span>
+        </gl-badge>
+        <gl-badge v-else :icon="processPropertyIcon(property.icon, property.value)">
+          {{ property.label }}: {{ formatPropertyValue(property.value) }}
+        </gl-badge>
+      </span>
+    </div>
+
     <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 v-if="message || description" class="-gl-ml-2" :header-level="3">
+      <gl-accordion-item v-if="description" class="gl-mb-3" :title="accordionTitle">
+        <pre-block>{{ description }}</pre-block>
+      </gl-accordion-item>
+      <gl-accordion-item v-if="withJsonView" :title="$options.i18n.EXPAND_JSON_VIEW_TITLE">
+        <tool-params-json-view :tool-params="toolParams" />
+      </gl-accordion-item>
     </gl-accordion>
+    <tool-params-json-view
+      v-else-if="!message && !description && withJsonView"
+      :tool-params="toolParams"
+    />
   </div>
 </template>

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

@@ -2,6 +2,7 @@
 import { GlSprintf, GlAccordion, GlAccordionItem } from '@gitlab/ui';
 import { createPatch } from 'diff';
 import { translate, translatePlural, sprintf } from '../../../../../utils/i18n';
+import BaseToolParams from './base_tool_params.vue';
 import PreBlock from './pre_block.vue';
 
 const NO_NEW_LINE_SIGNAL = '\';
@@ -12,6 +13,7 @@ export default {
     GlSprintf,
     GlAccordion,
     GlAccordionItem,
+    BaseToolParams,
     PreBlock,
   },
   props: {
@@ -21,15 +23,9 @@ export default {
     },
   },
   computed: {
-    project() {
-      return this.toolParams?.projectPath || this.toolParams?.projectId || '';
-    },
     branch() {
       return this.toolParams?.branch;
     },
-    startBranch() {
-      return this.toolParams?.startBranch || '';
-    },
     commitMessage() {
       return this.toolParams?.commitMessage;
     },
@@ -108,11 +104,11 @@ export default {
   i18n: {
     COMMIT_SUMMARY_MESSAGE: translate(
       'CreateCommitToolParams.commitSummaryMessage',
-      'Create a commit in the branch %{branch} and project %{project}.'
+      'Create a commit in the branch %{branch}.'
     ),
     COMMIT_SUMMARY_AUTO_BRANCH_MESSAGE: translate(
       'CreateCommitToolParams.commitSummaryAutoBranchMessage',
-      'Create a commit in a new auto-created branch and project %{project}.'
+      'Create a commit in a new auto-created branch.'
     ),
     READ_COMMIT_MESSAGE: translate(
       'CreateCommitToolParams.readCommitMessage',
@@ -151,7 +147,7 @@ export default {
 };
 </script>
 <template>
-  <div class="gl-flex gl-flex-col">
+  <base-tool-params :tool-params="toolParams">
     <div>
       <gl-sprintf
         :message="
@@ -160,17 +156,18 @@ export default {
             : $options.i18n.COMMIT_SUMMARY_AUTO_BRANCH_MESSAGE
         "
       >
-        <template #project>
-          <code>{{ project }}</code>
-        </template>
         <template v-if="branch" #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">
+    <gl-accordion class="-gl-ml-2" :header-level="3">
+      <gl-accordion-item
+        v-if="commitMessage"
+        class="gl-mb-3"
+        :title="$options.i18n.READ_COMMIT_MESSAGE"
+      >
         <pre-block>{{ commitMessage }}</pre-block>
       </gl-accordion-item>
       <gl-accordion-item v-if="actionsCount" :title="$options.i18n.EXPAND_CHANGES">
@@ -178,12 +175,13 @@ export default {
           <gl-accordion-item
             v-for="(action, index) in actions"
             :key="index"
+            class="gl-mb-3"
             :title="getActionTitle(action)"
           >
-            <pre-block>{{ getActionContent(action) }}</pre-block>
+            <pre-block class="language-diff">{{ getActionContent(action) }}</pre-block>
           </gl-accordion-item>
         </gl-accordion>
       </gl-accordion-item>
     </gl-accordion>
-  </div>
+  </base-tool-params>
 </template>

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

@@ -0,0 +1,72 @@
+<script>
+import { sprintf, translate } from '../../../../../utils/i18n';
+import { APPROVAL_TOOL_NAMES } from '../../../constants';
+import BaseToolParams from './base_tool_params.vue';
+
+export default {
+  name: 'DefaultToolParams',
+  components: {
+    BaseToolParams,
+  },
+  props: {
+    toolName: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    toolParams: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    title() {
+      return this.toolParams?.title;
+    },
+    description() {
+      return this.toolParams?.description || this.toolParams?.body || this.toolParams?.comment;
+    },
+    isNote() {
+      return [
+        APPROVAL_TOOL_NAMES.createMergeRequestNote,
+        APPROVAL_TOOL_NAMES.createWorkItemNote,
+        APPROVAL_TOOL_NAMES.createIssueNote,
+      ].includes(this.toolName);
+    },
+    message() {
+      const message = this.title ? this.$options.i18n.TITLE_MESSAGE : '';
+
+      return sprintf(message, {
+        ...this.toolParams,
+      });
+    },
+    accordionTitle() {
+      return this.isNote ? this.$options.i18n.NOTE_ACCORDION_TITLE : '';
+    },
+    displayRawOutput() {
+      return !this.message;
+    },
+  },
+  i18n: {
+    TITLE_MESSAGE: translate(
+      'IssuableToolParams.TITLE_MESSAGE',
+      'Set the title "<em>%{title}</em>".'
+    ),
+    NOTE_ACCORDION_TITLE: translate(
+      'IssuableToolParams.NOTE_ACCORDION_TITLE',
+      "Read note's content"
+    ),
+  },
+};
+</script>
+<template>
+  <div>
+    <base-tool-params
+      with-json-view
+      :tool-params="toolParams"
+      :message="message"
+      :description="description"
+      :custom-accordion-title="accordionTitle"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,42 @@
+<script>
+import { translate } from '../../../../../utils/i18n';
+import PreBlock from './pre_block.vue';
+
+export default {
+  name: 'ToolParamsJsonView',
+  components: {
+    PreBlock,
+  },
+  props: {
+    toolParams: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    hasToolParams() {
+      return Object.keys(this.toolParams || {}).length > 0;
+    },
+  },
+  i18n: {
+    REQUEST_TEXT: translate('MessageToolApproval.parametersText', 'Request parameters'),
+    NO_PARAMETERS_TEXT: translate(
+      'MessageToolApproval.noParametersText',
+      'No parameters will be sent with this request.'
+    ),
+  },
+};
+</script>
+<template>
+  <figure class="gl-m-0 gl-flex gl-flex-col gl-gap-2">
+    <figcaption class="gl-text-subtle">
+      {{ $options.i18n.REQUEST_TEXT }}
+    </figcaption>
+    <pre-block v-if="hasToolParams" class="language-json" data-testid="tool-parameters">{{
+      JSON.stringify(toolParams, null, 2)
+    }}</pre-block>
+    <span v-else class="gl-text-sm gl-text-gray-500" data-testid="no-parameters-message">
+      {{ $options.i18n.NO_PARAMETERS_TEXT }}
+    </span>
+  </figure>
+</template>