@gitlab/ui 94.4.2 → 94.6.0

package/src/components/experimental/duo/chat/components/duo_chat_context/mock_context_data.js

@@ -2,10 +2,12 @@ import {
   CONTEXT_ITEM_CATEGORY_ISSUE,
   CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
   CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
 } from './constants';
 
 export const MOCK_CATEGORIES = [
   { label: 'Files', value: CONTEXT_ITEM_CATEGORY_FILE, icon: 'document' },
+  { label: 'Local Git', value: CONTEXT_ITEM_CATEGORY_LOCAL_GIT, icon: 'git' },
   { label: 'Issues', value: CONTEXT_ITEM_CATEGORY_ISSUE, icon: 'issues' },
   { label: 'Merge Requests', value: CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, icon: 'merge-request' },
 ];
@@ -126,8 +128,69 @@ const mockMergeRequests = [
   MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED,
 ];
 
+export const MOCK_CONTEXT_ITEM_GIT_DIFF = {
+  id: '6d88b466-0c38-48d6-b271-deda47f97cee',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'Current working changes',
+    commitId: 'main',
+    repositoryName: 'example/garden',
+    gitType: 'diff',
+  },
+};
+export const MOCK_CONTEXT_ITEM_GIT_COMMIT = {
+  id: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+  category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  metadata: {
+    enabled: true,
+    title: 'fix: some bug fix commit',
+    commitId: '20f8caf94cb8f5e5f9dbd1a9ac32702321de201b',
+    repositoryName: 'example/garden',
+    gitType: 'commit',
+  },
+};
+
+const mockGitItems = [
+  MOCK_CONTEXT_ITEM_GIT_DIFF,
+  {
+    id: 'diff-example/garden',
+    category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+    metadata: {
+      enabled: true,
+      title: 'Diff from default branch',
+      commitId: 'main',
+      repositoryName: 'example/garden',
+      gitType: 'diff',
+    },
+  },
+  MOCK_CONTEXT_ITEM_GIT_COMMIT,
+  {
+    id: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+    category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+    metadata: {
+      enabled: true,
+      title: 'feat: add cool new feature',
+      commitId: '32b9b56b6de75b32909986755fbc470f20fb6fc0',
+      repositoryName: 'example/garden',
+      gitType: 'commit',
+    },
+  },
+  {
+    id: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+    category: CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+    metadata: {
+      enabled: true,
+      title: 'fix: stop foo from bar when baz because customers ding',
+      commitId: '775d7efdce25c1af48c55abcadbefd1f181b92ce',
+      repositoryName: 'example/garden',
+      gitType: 'commit',
+    },
+  },
+];
+
 export const getMockContextItems = () => {
-  const allItems = [...mockFiles, ...mockIssues, ...mockMergeRequests];
+  const allItems = [...mockFiles, ...mockGitItems, ...mockIssues, ...mockMergeRequests];
 
   // put disabled items in the back
   const disabledItems = allItems.filter((item) => !item.metadata.enabled);

package/src/components/experimental/duo/chat/components/duo_chat_context/utils.js

@@ -1,3 +1,13 @@
+import { translate } from '../../../../../../utils/i18n';
+import {
+  CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+  CONTEXT_ITEM_LOCAL_GIT_COMMIT,
+  CONTEXT_ITEM_LOCAL_GIT_DIFF,
+} from './constants';
+
 export function categoryValidator(category) {
   return Boolean(category && category.value && category.label && category.icon);
 }
@@ -42,6 +52,71 @@ export function formatMergeRequestId(iid) {
   return `!${iid}`;
 }
 
+function getGitItemIcon(contextItem) {
+  const iconMap = {
+    [CONTEXT_ITEM_LOCAL_GIT_COMMIT]: 'commit',
+    [CONTEXT_ITEM_LOCAL_GIT_DIFF]: 'comparison',
+  };
+  const { gitType } = contextItem.metadata;
+  return iconMap[gitType] || null;
+}
+
+/**
+ * Gets the icon name for a given contextItem.
+ */
+export function getContextItemIcon(contextItem, category = { icon: null }) {
+  if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
+    const gitIcon = getGitItemIcon(contextItem);
+    if (gitIcon) return gitIcon;
+  }
+
+  if (category.icon) {
+    return category.icon;
+  }
+
+  const iconMap = {
+    [CONTEXT_ITEM_CATEGORY_FILE]: 'document',
+    [CONTEXT_ITEM_CATEGORY_ISSUE]: 'issues',
+    [CONTEXT_ITEM_CATEGORY_MERGE_REQUEST]: 'merge-request',
+    [CONTEXT_ITEM_CATEGORY_LOCAL_GIT]: 'git',
+  };
+
+  return iconMap[contextItem.category] || null;
+}
+
+export function getContextItemTypeLabel(contextItem) {
+  if (contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
+    switch (contextItem.metadata.gitType) {
+      case CONTEXT_ITEM_LOCAL_GIT_DIFF:
+        return translate('DuoChatContextItemTypeLabel.GitDiff', 'Local Git repository diff');
+      case CONTEXT_ITEM_LOCAL_GIT_COMMIT:
+        return translate('DuoChatContextItemTypeLabel.GitCommit', 'Local Git repository commit');
+      default:
+        return translate('DuoChatContextItemTypeLabel.GitDefault', 'Local Git repository');
+    }
+  }
+
+  switch (contextItem.category) {
+    case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+      return translate('DuoChatContextItemTypeLabel.MergeRequest', 'Merge request');
+    case CONTEXT_ITEM_CATEGORY_ISSUE:
+      return translate('DuoChatContextItemTypeLabel.Issue', 'Issue');
+    case CONTEXT_ITEM_CATEGORY_FILE:
+      return translate('DuoChatContextItemTypeLabel.File', 'Project file');
+    default:
+      return '';
+  }
+}
+
+/**
+ * Gets the secondary text line for a git context item, showing repository and commit ID
+ */
+export function formatGitItemSecondaryText(contextItem) {
+  const { repositoryName, commitId } = contextItem.metadata;
+  const separator = commitId ? ' - ' : '';
+  return `${repositoryName}${separator}${commitId || ''}`;
+}
+
 /**
  * Calculates a new index within a range. If the new index would fall out of bounds, wraps to the start/end of the range.
  * @param {number} currentIndex - The starting index.

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.scss

@@ -7,7 +7,7 @@
   }
 
   .text-enter {
-    @include gl-opacity-0;
+    @apply gl-opacity-0;
   }
 
   .text-enter-active {
@@ -15,11 +15,11 @@
   }
 
   .text-enter-to {
-    @include gl-opacity-10;
+    @apply gl-opacity-10;
   }
 
   .text-leave {
-    @include gl-opacity-10;
+    @apply gl-opacity-10;
   }
 
   .text-leave-active {
@@ -27,7 +27,7 @@
   }
 
   .text-leave-to {
-    @include gl-opacity-0;
+    @apply gl-opacity-0;
   }
 
   &__dot {

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.scss

@@ -26,7 +26,7 @@
   insert-code-snippet {
     position: absolute;
     @apply gl-transition-all;
-    @include gl-opacity-0;
+    @apply gl-opacity-0;
     right: $gl-spacing-scale-3;
     top: $gl-spacing-scale-3;
   }
@@ -40,7 +40,7 @@
     copy-code:focus-within,
     insert-code-snippet,
     insert-code-snippet:focus-within {
-      @include gl-opacity-10;
+      @apply gl-opacity-10;
     }
   }
 

package/src/components/experimental/duo/chat/duo_chat.scss

@@ -1,7 +1,7 @@
 $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10);
 
 .duo-chat {
-  @include gl-z-index-999;
+  z-index: 999;
 
   .message-enter-active,
   .message-leave-active {
@@ -10,7 +10,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
 
   .message-enter,
   .message-leave-to {
-    @include gl-opacity-0;
+    @apply gl-opacity-0;
     transform: translateY(10px);
   }
 
@@ -42,7 +42,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
   @apply gl-h-full;
   @apply gl-w-full;
   @apply gl-overflow-y-auto;
-  @include gl-shadow-lg;
+  @apply gl-shadow-lg;
   @apply gl-text-base;
   @apply gl-leading-normal;
   @apply gl-flex;
@@ -86,7 +86,7 @@ $duo-chat-scrim-gradient: linear-gradient(to bottom, rgba($gray-10, 0), $gray-10
     content: '';
     left: 0;
     position: absolute;
-    @include gl-pointer-events-none;
+    @apply gl-pointer-events-none;
     @apply gl-w-full;
     @apply gl-h-7;
   }

package/src/components/shared_components/clear_icon_button/clear_icon_button.scss

@@ -1,7 +1,7 @@
 .gl-clear-icon-button {
   @apply gl-bg-transparent;
   @apply gl-border-none;
-  @include gl-cursor-pointer;
+  @apply gl-cursor-pointer;
   @apply gl-text-gray-500;
 
   &:focus {

package/src/scss/typescale/_index.scss

@@ -2,7 +2,7 @@
   #{$selector} {
     @apply gl-text-base;
     @apply gl-text-gray-900;
-    @include gl-font-regular;
+    @apply gl-font-regular;
     @apply gl-font-normal;
     @apply gl-leading-normal;
   }
@@ -89,7 +89,7 @@
   }
 
   .monospace {
-    @include gl-font-monospace;
+    @apply gl-font-monospace;
   }
 
   blockquote {

package/src/tokens/background.tokens.json

@@ -36,13 +36,16 @@
       "overlap": {
         "$value": {
           "default": "{color.neutral.0}",
-          "dark": "{color.neutral.800}"
+          "dark": "{color.neutral.900}"
         },
         "$type": "color",
         "$description": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
       },
       "section": {
-        "$value": "{background.color.overlap}",
+        "$value": {
+          "default": "{color.neutral.0}",
+          "dark": "{color.neutral.800}"
+        },
         "$type": "color",
         "$description": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes."
       },

package/src/tokens/build/css/tokens.css

@@ -730,6 +730,7 @@
   --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
   --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /* Used for an overlay that covers other content. */
+  --gl-background-color-section: var(--gl-color-neutral-0); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-background-color-overlap: var(--gl-color-neutral-0); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
@@ -846,7 +847,6 @@
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
   --gl-border-color-section: var(--gl-border-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
-  --gl-background-color-section: var(--gl-background-color-overlap); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */

package/src/tokens/build/css/tokens.dark.css

@@ -730,7 +730,8 @@
   --gl-border-color-subtle: var(--gl-color-neutral-900); /* Used for a subtle border in combination with the default background. */
   --gl-border-color-default: var(--gl-color-neutral-800); /* Used for the default border color. */
   --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
-  --gl-background-color-overlap: var(--gl-color-neutral-800); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
+  --gl-background-color-section: var(--gl-color-neutral-800); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
+  --gl-background-color-overlap: var(--gl-color-neutral-900); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
   --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */
   --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
   --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
@@ -846,7 +847,6 @@
   --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
   --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
   --gl-border-color-section: var(--gl-background-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
-  --gl-background-color-section: var(--gl-background-color-overlap); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
   --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
   --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */

package/src/tokens/build/js/tokens.dark.js

@@ -82,7 +82,7 @@ export const GL_BACKGROUND_COLOR_DEFAULT = '#18171d'; // Used for the default ba
 export const GL_BACKGROUND_COLOR_SUBTLE = '#28272d'; // Used to slightly differentiate the background from the default.
 export const GL_BACKGROUND_COLOR_STRONG = '#3a383f'; // Used to make the background easily stand out from the default.
 export const GL_BACKGROUND_COLOR_DISABLED = '#28272d'; // Used to identify a disabled section.
-export const GL_BACKGROUND_COLOR_OVERLAP = '#3a383f'; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
+export const GL_BACKGROUND_COLOR_OVERLAP = '#28272d'; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 export const GL_BACKGROUND_COLOR_SECTION = '#3a383f'; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)'; // Used for an overlay that covers other content.
 export const GL_BORDER_COLOR_DEFAULT = '#3a383f'; // Used for the default border color.

package/src/tokens/build/json/tokens.dark.json

@@ -1869,7 +1869,7 @@
         ]
       },
       "overlap": {
-        "value": "#3a383f",
+        "value": "#28272d",
         "$type": "color",
         "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.",
         "filePath": "src/tokens/background.tokens.json",
@@ -1877,7 +1877,7 @@
         "original": {
           "value": {
             "default": "{color.neutral.0}",
-            "dark": "{color.neutral.800}"
+            "dark": "{color.neutral.900}"
           },
           "$type": "color",
           "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
@@ -1897,7 +1897,10 @@
         "filePath": "src/tokens/background.tokens.json",
         "isSource": true,
         "original": {
-          "value": "{background.color.overlap}",
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.800}"
+          },
           "$type": "color",
           "comment": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes."
         },

package/src/tokens/build/json/tokens.json

@@ -1877,7 +1877,7 @@
         "original": {
           "value": {
             "default": "{color.neutral.0}",
-            "dark": "{color.neutral.800}"
+            "dark": "{color.neutral.900}"
           },
           "$type": "color",
           "comment": "Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content."
@@ -1897,7 +1897,10 @@
         "filePath": "src/tokens/background.tokens.json",
         "isSource": true,
         "original": {
-          "value": "{background.color.overlap}",
+          "value": {
+            "default": "{color.neutral.0}",
+            "dark": "{color.neutral.800}"
+          },
           "$type": "color",
           "comment": "Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes."
         },

package/src/tokens/build/scss/_tokens.dark.scss

@@ -728,7 +728,8 @@ $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border th
 $gl-border-color-subtle: $gl-color-neutral-900; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-800; // Used for the default border color.
 $gl-background-color-overlay: rgba(0,0,0,0.64); // Used for an overlay that covers other content.
-$gl-background-color-overlap: $gl-color-neutral-800; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
+$gl-background-color-section: $gl-color-neutral-800; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
+$gl-background-color-overlap: $gl-color-neutral-900; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
 $gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
@@ -844,7 +845,6 @@ $gl-alert-info-title-color: $gl-color-blue-300; // Used for the title color of a
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-border-color-section: $gl-background-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
-$gl-background-color-section: $gl-background-color-overlap; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

package/src/tokens/build/scss/_tokens.scss

@@ -728,6 +728,7 @@ $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border th
 $gl-border-color-subtle: $gl-color-neutral-50; // Used for a subtle border in combination with the default background.
 $gl-border-color-default: $gl-color-neutral-100; // Used for the default border color.
 $gl-background-color-overlay: $gl-color-alpha-dark-24; // Used for an overlay that covers other content.
+$gl-background-color-section: $gl-color-neutral-0; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-background-color-overlap: $gl-color-neutral-0; // Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content.
 $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disabled section.
 $gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
@@ -844,7 +845,6 @@ $gl-alert-info-title-color: $gl-text-color-heading; // Used for the title color
 $gl-alert-neutral-background-color: $gl-feedback-neutral-background-color; // Used for the background color of a neutral alert.
 $gl-alert-neutral-title-color: $gl-text-color-heading; // Used for the title color of a neutral alert.
 $gl-border-color-section: $gl-border-color-default; // Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page.
-$gl-background-color-section: $gl-background-color-overlap; // Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes.
 $gl-action-strong-neutral-border-color-hover: $gl-action-strong-neutral-border-color-default; // Used for the border of a strong neutral action in the hover state.
 $gl-action-strong-neutral-foreground-color-hover: $gl-action-strong-neutral-foreground-color-default; // Used for the foreground of a strong neutral action in the hover state.
 $gl-action-strong-neutral-background-color-focus: $gl-action-strong-neutral-background-color-hover; // Used for the background of a strong neutral action in the focus state.

package/src/tokens/build/tailwind/tokens.cjs

@@ -220,7 +220,7 @@ const backgroundColors = {
   strong: 'var(--gl-background-color-strong, var(--gl-color-neutral-50, #ececef))',
   disabled: 'var(--gl-background-color-disabled, var(--gl-color-neutral-10, #fbfafd))',
   overlap: 'var(--gl-background-color-overlap, var(--gl-color-neutral-0, #fff))',
-  section: 'var(--gl-background-color-section, var(--gl-background-color-overlap, #fff))',
+  section: 'var(--gl-background-color-section, var(--gl-color-neutral-0, #fff))',
   overlay:
     'var(--gl-background-color-overlay, var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24)))',
 };

package/translations.js

@@ -3,9 +3,12 @@ export default {
   'ClearIconButton.title': 'Clear',
   'CloseButton.title': 'Close',
   'DuoChatContextItemPopover.DisabledReason': 'This item is disabled',
-  'DuoChatContextItemPopover.File': 'Project file',
-  'DuoChatContextItemPopover.Issue': 'Issue',
-  'DuoChatContextItemPopover.MergeRequest': 'Merge request',
+  'DuoChatContextItemTypeLabel.File': 'Project file',
+  'DuoChatContextItemTypeLabel.GitCommit': 'Local Git repository commit',
+  'DuoChatContextItemTypeLabel.GitDefault': 'Local Git repository',
+  'DuoChatContextItemTypeLabel.GitDiff': 'Local Git repository diff',
+  'DuoChatContextItemTypeLabel.Issue': 'Issue',
+  'DuoChatContextItemTypeLabel.MergeRequest': 'Merge request',
   'GlAlert.closeButtonTitle': 'Dismiss',
   'GlBanner.closeButtonTitle': 'Dismiss',
   'GlBreadcrumb.showMoreLabel': 'Show more breadcrumbs',