@gitlab/ui 94.10.0 → 95.1.0

package/dist/tokens/scss/_tokens.dark.scss

@@ -503,6 +503,7 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $gl-spinner-track-color-default: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-700; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-800; // Used for the skeleton loader background color.
+$gl-progress-bar-track-color: $gl-color-neutral-700; // Used for the track color for all progress-bar variants.
 $gl-link-mention-background-color-current: $gl-color-orange-800; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-800; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-100; // Used for the mention link text color when referencing the current user.
@@ -779,6 +780,10 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
+$gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
+$gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
+$gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-color-neutral-0; // Used for the dropdown selected option indicator in the focus state.

package/dist/tokens/scss/_tokens.scss

@@ -503,6 +503,7 @@ $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static tra
 $gl-spinner-track-color-default: $gl-color-neutral-100; // Used for the static track (background) of a loading spinner.
 $gl-skeleton-loader-shimmer-color: $gl-color-neutral-50; // Used for the animated shimmer effect in a skeleton loader.
 $gl-skeleton-loader-background-color: $gl-color-neutral-100; // Used for the skeleton loader background color.
+$gl-progress-bar-track-color: $gl-color-neutral-200; // Used for the track color for all progress-bar variants.
 $gl-link-mention-background-color-current: $gl-color-orange-100; // Used for the mention link background when referencing the current user.
 $gl-link-mention-background-color-default: $gl-color-blue-100; // Used for the mention link default background.
 $gl-link-mention-text-color-current: $gl-color-orange-800; // Used for the mention link text color when referencing the current user.
@@ -779,6 +780,10 @@ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text
 $gl-token-foreground-color: $gl-text-color-default; // Used for the token foreground color.
 $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
 $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
+$gl-progress-bar-indicator-color-danger: $gl-status-danger-icon-color; // Used for the indicator color for the danger progress-bar variant.
+$gl-progress-bar-indicator-color-warning: $gl-status-warning-icon-color; // Used for the indicator color for the warning progress-bar variant.
+$gl-progress-bar-indicator-color-success: $gl-status-success-icon-color; // Used for the indicator color for the success progress-bar variant.
+$gl-progress-bar-indicator-color-default: $gl-status-info-icon-color; // Used for the indicator color for the primary progress-bar variant.
 $gl-dropdown-option-background-color-selected-focus: $gl-dropdown-option-background-color-selected-hover; // Used for the background of a selected dropdown option in the focus state.
 $gl-dropdown-option-background-color-unselected-focus: $gl-action-neutral-background-color-focus; // Used for the background of an unselected dropdown option in the focus state.
 $gl-dropdown-option-indicator-color-selected-focus: $gl-control-background-color-selected-focus; // Used for the dropdown selected option indicator in the focus state.

package/dist/tokens/scss/_tokens_custom_properties.scss

@@ -668,6 +668,11 @@ $gl-link-mention-text-color-default: var(--gl-link-mention-text-color-default);
 $gl-link-mention-text-color-current: var(--gl-link-mention-text-color-current);
 $gl-link-mention-background-color-default: var(--gl-link-mention-background-color-default);
 $gl-link-mention-background-color-current: var(--gl-link-mention-background-color-current);
+$gl-progress-bar-indicator-color-default: var(--gl-progress-bar-indicator-color-default);
+$gl-progress-bar-indicator-color-success: var(--gl-progress-bar-indicator-color-success);
+$gl-progress-bar-indicator-color-warning: var(--gl-progress-bar-indicator-color-warning);
+$gl-progress-bar-indicator-color-danger: var(--gl-progress-bar-indicator-color-danger);
+$gl-progress-bar-track-color: var(--gl-progress-bar-track-color);
 $gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
 $gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);
 $gl-spinner-track-color-default: var(--gl-spinner-track-color-default);

package/dist/utils/constants.js

@@ -1,11 +1,5 @@
 import { POSITION } from '../components/utilities/truncate/constants';
 
-function appendDefaultOption(options) {
-  return {
-    ...options,
-    default: ''
-  };
-}
 const COMMA = ',';
 const CONTRAST_LEVELS = [{
   grade: 'F',
@@ -26,15 +20,11 @@ const CONTRAST_LEVELS = [{
 }];
 const HEX_REGEX = /^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$/;
 const LEFT_MOUSE_BUTTON = 0;
-const variantOptions = {
+const progressBarVariantOptions = {
   primary: 'primary',
-  secondary: 'secondary',
   success: 'success',
   warning: 'warning',
-  danger: 'danger',
-  info: 'info',
-  light: 'light',
-  dark: 'dark'
+  danger: 'danger'
 };
 const badgeSizeOptions = {
   sm: 'sm',
@@ -251,7 +241,6 @@ const tabsButtonDefaults = {
 };
 const tokenVariants = ['default', 'search-type', 'search-value'];
 const resizeDebounceTime = 200;
-const variantOptionsWithNoDefault = appendDefaultOption(variantOptions);
 
 // Datetime constants
 const defaultDateFormat = 'YYYY-MM-DD';
@@ -305,4 +294,4 @@ const loadingIconVariants = {
   dots: 'dots'
 };
 
-export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, variantOptions, variantOptionsWithNoDefault, viewModeOptions };
+export { COMMA, CONTRAST_LEVELS, HEX_REGEX, LEFT_MOUSE_BUTTON, alertVariantIconMap, alertVariantOptions, alignOptions, avatarShapeOptions, avatarSizeOptions, avatarsInlineSizeOptions, badgeForButtonOptions, badgeIconSizeOptions, badgeSizeOptions, badgeVariantOptions, bannerVariants, buttonCategoryOptions, buttonSizeOptions, buttonVariantOptions, colorThemes, columnOptions, datepickerWidthOptionsMap, defaultDateFormat, drawerVariants, dropdownAllowedAutoPlacements, dropdownPlacements, dropdownVariantOptions, focusableTags, formInputWidths, formStateOptions, iconSizeOptions, iconVariantOptions, keyboard, labelColorOptions, loadingIconSizes, loadingIconVariants, maxZIndex, modalButtonDefaults, modalSizeOptions, popoverPlacements, progressBarVariantOptions, resizeDebounceTime, tabsButtonDefaults, targetOptions, toggleLabelPosition, tokenVariants, tooltipActionEvents, tooltipDelay, tooltipPlacements, triggerVariantOptions, truncateOptions, variantCssColorMap, viewModeOptions };

package/dist/vendor/bootstrap-vue/src/components/modal/modal.js

@@ -71,9 +71,7 @@ const props = makePropsConfigurable(sortKeys({
   autoFocusButton: makeProp(PROP_TYPE_STRING, null, /* istanbul ignore next */value => {
     return isUndefinedOrNull(value) || arrayIncludes(BUTTONS, value);
   }),
-  bodyBgVariant: makeProp(PROP_TYPE_STRING),
   bodyClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  bodyTextVariant: makeProp(PROP_TYPE_STRING),
   busy: makeProp(PROP_TYPE_BOOLEAN, false),
   buttonSize: makeProp(PROP_TYPE_STRING),
   cancelDisabled: makeProp(PROP_TYPE_BOOLEAN, false),
@@ -83,19 +81,12 @@ const props = makePropsConfigurable(sortKeys({
   centered: makeProp(PROP_TYPE_BOOLEAN, false),
   contentClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   dialogClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
-  footerBgVariant: makeProp(PROP_TYPE_STRING),
-  footerBorderVariant: makeProp(PROP_TYPE_STRING),
   footerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   footerTag: makeProp(PROP_TYPE_STRING, 'footer'),
-  footerTextVariant: makeProp(PROP_TYPE_STRING),
-  headerBgVariant: makeProp(PROP_TYPE_STRING),
-  headerBorderVariant: makeProp(PROP_TYPE_STRING),
   headerClass: makeProp(PROP_TYPE_ARRAY_OBJECT_STRING),
   headerCloseContent: makeProp(PROP_TYPE_STRING, '×'),
   headerCloseLabel: makeProp(PROP_TYPE_STRING, 'Close'),
-  headerCloseVariant: makeProp(PROP_TYPE_STRING),
   headerTag: makeProp(PROP_TYPE_STRING, 'header'),
-  headerTextVariant: makeProp(PROP_TYPE_STRING),
   // TODO: Rename to `noBackdrop` and deprecate `hideBackdrop`
   hideBackdrop: makeProp(PROP_TYPE_BOOLEAN, false),
   // TODO: Rename to `noFooter` and deprecate `hideFooter`
@@ -209,31 +200,11 @@ const BModal = /*#__PURE__*/extend({
         'modal-dialog-scrollable': this.scrollable
       }, this.dialogClass];
     },
-    headerClasses() {
-      return [{
-        [`bg-${this.headerBgVariant}`]: this.headerBgVariant,
-        [`text-${this.headerTextVariant}`]: this.headerTextVariant,
-        [`border-${this.headerBorderVariant}`]: this.headerBorderVariant
-      }, this.headerClass];
-    },
     titleClasses() {
       return [{
         'sr-only': this.titleSrOnly
       }, this.titleClass];
     },
-    bodyClasses() {
-      return [{
-        [`bg-${this.bodyBgVariant}`]: this.bodyBgVariant,
-        [`text-${this.bodyTextVariant}`]: this.bodyTextVariant
-      }, this.bodyClass];
-    },
-    footerClasses() {
-      return [{
-        [`bg-${this.footerBgVariant}`]: this.footerBgVariant,
-        [`text-${this.footerTextVariant}`]: this.footerTextVariant,
-        [`border-${this.footerBorderVariant}`]: this.footerBorderVariant
-      }, this.footerClass];
-    },
     modalOuterStyle() {
       // Styles needed for proper stacking of modals
       return {
@@ -706,8 +677,7 @@ const BModal = /*#__PURE__*/extend({
               props: {
                 content: this.headerCloseContent,
                 disabled: this.isTransitioning,
-                ariaLabel: this.headerCloseLabel,
-                textVariant: this.headerCloseVariant || this.headerTextVariant
+                ariaLabel: this.headerCloseLabel
               },
               on: {
                 click: this.onClose
@@ -731,7 +701,7 @@ const BModal = /*#__PURE__*/extend({
         }
         $header = h(this.headerTag, {
           staticClass: 'modal-header',
-          class: this.headerClasses,
+          class: this.headerClass,
           attrs: {
             id: this.modalHeaderId
           },
@@ -742,7 +712,7 @@ const BModal = /*#__PURE__*/extend({
       // Modal body
       const $body = h('div', {
         staticClass: 'modal-body',
-        class: this.bodyClasses,
+        class: this.bodyClass,
         attrs: {
           id: this.modalBodyId
         },
@@ -792,7 +762,7 @@ const BModal = /*#__PURE__*/extend({
         }
         $footer = h(this.footerTag, {
           staticClass: 'modal-footer',
-          class: this.footerClasses,
+          class: this.footerClass,
           attrs: {
             id: this.modalFooterId
           },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "94.10.0",
+  "version": "95.1.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/progress_bar/progress_bar.scss

@@ -0,0 +1,19 @@
+.gl-progress-bar {
+  background-color: var(--gl-progress-bar-track-color);
+
+  .bg-primary {
+    background-color: var(--gl-progress-bar-indicator-color-default) !important;
+  }
+
+  .bg-success {
+    background-color: var(--gl-progress-bar-indicator-color-success) !important;
+  }
+
+  .bg-warning {
+    background-color: var(--gl-progress-bar-indicator-color-warning) !important;
+  }
+
+  .bg-danger {
+    background-color: var(--gl-progress-bar-indicator-color-danger) !important;
+  }
+}

package/src/components/base/progress_bar/progress_bar.vue

@@ -11,5 +11,5 @@ export default {
 </script>
 
 <template>
-  <b-progress v-bind="$attrs" />
+  <b-progress v-bind="$attrs" class="gl-progress-bar" />
 </template>

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

@@ -5,3 +5,7 @@ export const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
 
 export const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
 export const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';
+
+export const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
+export const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';
+export const LANGUAGE_IDENTIFIER_PLAINTEXT = 'language-plaintext';

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue

@@ -0,0 +1,114 @@
+<script>
+import { nextTick } from 'vue';
+import { contextItemValidator } from '../utils';
+import GlModal from '../../../../../../base/modal/modal.vue';
+import { SafeHtmlDirective as SafeHtml } from '../../../../../../../directives/safe_html/safe_html';
+import GlSkeletonLoader from '../../../../../../base/skeleton_loader/skeleton_loader.vue';
+import { translate } from '../../../../../../../utils/i18n';
+import {
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  LANGUAGE_IDENTIFIER_DIFF,
+  LANGUAGE_IDENTIFIER_PLAINTEXT,
+  LANGUAGE_IDENTIFIER_PREFIX,
+} from '../constants';
+
+export default {
+  name: 'GlDuoChatContextItemDetailsModal',
+  components: {
+    GlSkeletonLoader,
+    GlModal,
+  },
+  directives: {
+    SafeHtml,
+  },
+  inject: {
+    renderGFM: {
+      from: 'renderGFM',
+      default: () => (element) => {
+        element.classList.add('gl-markdown', 'gl-compact-markdown');
+      },
+    },
+  },
+  props: {
+    /**
+     * Context items to preview. If it has no `content`, the loading state will be displayed.
+     */
+    contextItem: {
+      type: Object,
+      required: true,
+      validator: contextItemValidator,
+    },
+  },
+  computed: {
+    isLoadingContent() {
+      return this.contextItem.content === undefined;
+    },
+    languageIdentifierClass() {
+      if (this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
+        return LANGUAGE_IDENTIFIER_DIFF;
+      }
+
+      const fileExtension = this.contextItem.metadata?.relativePath?.split('.').at(-1);
+      if (fileExtension && fileExtension !== this.contextItem.metadata?.relativePath) {
+        return `${LANGUAGE_IDENTIFIER_PREFIX}${fileExtension}`;
+      }
+
+      return LANGUAGE_IDENTIFIER_PLAINTEXT;
+    },
+    title() {
+      return (
+        this.contextItem.metadata?.title ||
+        this.contextItem.metadata?.relativePath ||
+        translate('GlDuoChatContextItemDetailsModal.title', 'Preview')
+      );
+    },
+  },
+  watch: {
+    contextItem: {
+      async handler(newVal, oldVal) {
+        const shouldFormat = newVal?.content !== oldVal?.content && newVal?.content;
+        if (shouldFormat) {
+          await nextTick();
+          await this.hydrateContentWithGFM();
+        }
+      },
+      immediate: true,
+    },
+  },
+  methods: {
+    async hydrateContentWithGFM() {
+      await nextTick();
+
+      if (this.$refs.content) {
+        this.renderGFM(this.$refs.content);
+      }
+    },
+    onModalVisibilityChange(isVisible) {
+      if (!isVisible) {
+        this.$emit('close');
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-modal
+    modal-id="context-item-details-modal"
+    :title="title"
+    :visible="true"
+    :scrollable="true"
+    hide-footer
+    size="lg"
+    @change="onModalVisibilityChange"
+  >
+    <gl-skeleton-loader v-if="isLoadingContent" />
+    <div v-else ref="content" data-testid="context-item-content">
+      <pre
+        v-safe-html="contextItem.content"
+        class="code js-syntax-highlight gl-p-3"
+        :class="languageIdentifierClass"
+      ></pre>
+    </div>
+  </gl-modal>
+</template>

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.vue

@@ -218,6 +218,14 @@ export default {
 
       this.activeIndex = newIndex;
     },
+    onGetContextItemContent(contextItem) {
+      /**
+       * Emit get-context-item-content event that tells clients to load the full file content for a selected context item.
+       * The fully hydrated context item should be updated in the context item selections.
+       * @param {*} event An event containing the context item to hydrate
+       */
+      this.$emit('get-context-item-content', { contextItem });
+    },
   },
   i18n: {
     selectedContextItemsTitle: translate(
@@ -233,11 +241,13 @@ export default {
     <gl-duo-chat-context-item-selections
       v-if="selections.length"
       :selections="selections"
+      :categories="categories"
       :removable="true"
       :title="$options.i18n.selectedContextItemsTitle"
       :default-collapsed="false"
       class="gl-mb-3"
       @remove="removeItem"
+      @get-content="onGetContextItemContent"
     />
     <gl-card
       v-if="open"

package/src/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue

@@ -4,12 +4,15 @@ import GlIcon from '../../../../../../base/icon/icon.vue';
 import GlToken from '../../../../../../base/token/token.vue';
 import GlTruncate from '../../../../../../utilities/truncate/truncate.vue';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+import { CONTEXT_ITEM_CATEGORY_FILE, CONTEXT_ITEM_CATEGORY_LOCAL_GIT } from '../constants';
+import GlDuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.vue';
 import { contextItemsValidator, getContextItemIcon } from '../utils';
 
 export default {
   name: 'GlDuoChatContextItemSelections',
   components: {
     GlTruncate,
+    GlDuoChatContextItemDetailsModal,
     GlIcon,
     GlDuoChatContextItemPopover,
     GlToken,
@@ -55,6 +58,7 @@ export default {
     return {
       isCollapsed: this.defaultCollapsed,
       selectionsId: uniqueId(),
+      previewContextItemId: null,
     };
   },
   computed: {
@@ -73,6 +77,9 @@ export default {
       }
       return '';
     },
+    contextItemPreview() {
+      return this.selections.find((item) => item.id === this.previewContextItemId);
+    },
   },
   methods: {
     getContextItemIcon,
@@ -86,6 +93,30 @@ export default {
        */
       this.$emit('remove', contextItem);
     },
+    onOpenItem(event, contextItem) {
+      const isKeypressOnCloseButton =
+        event.type === 'keydown' && event.target !== event.currentTarget;
+      if (isKeypressOnCloseButton) {
+        // don't respond to events triggered by the gl-token children (e.g. the close button)
+        return;
+      }
+
+      if (!this.canOpen(contextItem)) {
+        return;
+      }
+      if (!contextItem.content) {
+        this.$emit('get-content', contextItem);
+      }
+      this.previewContextItemId = contextItem.id;
+    },
+    canOpen(contextItem) {
+      return [CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE].includes(
+        contextItem.category
+      );
+    },
+    onClosePreview() {
+      this.previewContextItemId = null;
+    },
   },
 };
 </script>
@@ -114,6 +145,11 @@ export default {
         variant="default"
         class="gl-mb-2 gl-mr-2 gl-max-w-full"
         :class="tokenVariantClasses"
+        :tabindex="canOpen(item) ? 0 : -1"
+        :role="canOpen(item) ? 'button' : undefined"
+        @click="onOpenItem($event, item)"
+        @keydown.enter="onOpenItem($event, item)"
+        @keydown.space.prevent="onOpenItem($event, item)"
         @close="onRemoveItem(item)"
       >
         <div
@@ -132,8 +168,14 @@ export default {
           :context-item="item"
           :target="`context-item-${item.id}-${selectionsId}-token`"
           placement="bottom"
+          @show-git-diff="onOpenItem(item)"
         />
       </gl-token>
     </div>
+    <gl-duo-chat-context-item-details-modal
+      v-if="contextItemPreview"
+      :context-item="contextItemPreview"
+      @close="onClosePreview"
+    />
   </div>
 </template>

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

@@ -16,6 +16,21 @@ export function getMockCategory(categoryValue) {
   return MOCK_CATEGORIES.find((cat) => cat.value === categoryValue);
 }
 
+export const MOCK_CONTEXT_FILE_CONTENT = `export function waterPlants() {
+    console.log('sprinkle');
+}`;
+
+export const MOCK_CONTEXT_FILE_DIFF_CONTENT = `diff --git a/src/plants/strawberry.ts b/src/plants/strawberry.ts
+index 1234567..8901234 100644
+--- a/src/plants/strawberry.ts
++++ b/src/plants/strawberry.ts
+@@ -1,4 +1,4 @@
+ export const strawberry = {
+   name: 'Strawberry',
+-  waterNeeds: 'moderate',
++  waterNeeds: 'high',
+ };`;
+
 export const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
   category: CONTEXT_ITEM_CATEGORY_FILE,

package/src/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.vue

@@ -57,6 +57,9 @@ export default {
     onInsertCodeSnippet(e) {
       this.$emit('insert-code-snippet', e);
     },
+    onGetContextItemContent(e) {
+      this.$emit('get-context-item-content', e);
+    },
   },
   i18n,
 };
@@ -81,6 +84,7 @@ export default {
       :is-cancelled="canceledRequestIds.includes(msg.requestId)"
       @track-feedback="onTrackFeedback"
       @insert-code-snippet="onInsertCodeSnippet"
+      @get-context-item-content="onGetContextItemContent"
     />
   </div>
 </template>

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

@@ -234,6 +234,12 @@ export default {
     onInsertCodeSnippet(e) {
       this.$emit('insert-code-snippet', e);
     },
+    onGetContextItemContent(contextItem) {
+      this.$emit('get-context-item-content', {
+        messageId: this.message.id,
+        contextItem,
+      });
+    },
   },
 };
 </script>
@@ -264,6 +270,7 @@ export default {
         :title="selectedContextItemsTitle"
         :default-collapsed="selectedContextItemsDefaultCollapsed"
         variant="assistant"
+        @get-content="onGetContextItemContent"
       />
       <div
         v-if="error"
@@ -309,6 +316,7 @@ export default {
         :title="selectedContextItemsTitle"
         :default-collapsed="selectedContextItemsDefaultCollapsed"
         variant="user"
+        @get-content="onGetContextItemContent"
       />
     </div>
   </div>

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

@@ -518,6 +518,14 @@ export default {
        */
       this.$emit('insert-code-snippet', e);
     },
+    onGetContextItemContent(event) {
+      /**
+       * Emit get-context-item-content event that tells clients to load the full file content for a selected context item.
+       * The fully hydrated context item should be updated in the chat message context item.
+       * @param {*} event An event containing the message ID and context item to hydrate
+       */
+      this.$emit('get-context-item-content', event);
+    },
     closeContextItemsMenuOpen() {
       this.contextItemsMenuIsOpen = false;
       this.setPromptAndFocus();
@@ -603,6 +611,7 @@ export default {
           :show-delimiter="index > 0"
           @track-feedback="onTrackFeedback"
           @insert-code-snippet="onInsertCodeSnippet"
+          @get-context-item-content="onGetContextItemContent"
         />
         <template v-if="!hasMessages && !isLoading">
           <gl-empty-state

package/src/scss/components.scss

@@ -58,6 +58,7 @@
 @import '../components/base/pagination/pagination';
 @import '../components/base/path/path';
 @import '../components/base/popover/popover';
+@import '../components/base/progress_bar/progress_bar';
 @import '../components/base/search_box_by_type/search_box_by_type';
 @import '../components/base/search_box_by_click/search_box_by_click';
 @import '../components/base/segmented_control/segmented_control';

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

@@ -505,6 +505,7 @@
   --gl-spinner-track-color-default: var(--gl-color-neutral-100); /* Used for the static track (background) of a loading spinner. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-50); /* Used for the animated shimmer effect in a skeleton loader. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-100); /* Used for the skeleton loader background color. */
+  --gl-progress-bar-track-color: var(--gl-color-neutral-200); /* Used for the track color for all progress-bar variants. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-100); /* Used for the mention link background when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-100); /* Used for the mention link default background. */
   --gl-link-mention-text-color-current: var(--gl-color-orange-800); /* Used for the mention link text color when referencing the current user. */
@@ -781,6 +782,10 @@
   --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /* Used for the indicator color for the danger progress-bar variant. */
+  --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /* Used for the indicator color for the warning progress-bar variant. */
+  --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /* Used for the indicator color for the success progress-bar variant. */
+  --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */
   --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
   --gl-dropdown-option-indicator-color-selected-focus: var(--gl-control-background-color-selected-focus); /* Used for the dropdown selected option indicator in the focus state. */

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

@@ -505,6 +505,7 @@
   --gl-spinner-track-color-default: var(--gl-color-neutral-800); /* Used for the static track (background) of a loading spinner. */
   --gl-skeleton-loader-shimmer-color: var(--gl-color-neutral-700); /* Used for the animated shimmer effect in a skeleton loader. */
   --gl-skeleton-loader-background-color: var(--gl-color-neutral-800); /* Used for the skeleton loader background color. */
+  --gl-progress-bar-track-color: var(--gl-color-neutral-700); /* Used for the track color for all progress-bar variants. */
   --gl-link-mention-background-color-current: var(--gl-color-orange-800); /* Used for the mention link background when referencing the current user. */
   --gl-link-mention-background-color-default: var(--gl-color-blue-800); /* Used for the mention link default background. */
   --gl-link-mention-text-color-current: var(--gl-color-orange-100); /* Used for the mention link text color when referencing the current user. */
@@ -781,6 +782,10 @@
   --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
   --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
   --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
+  --gl-progress-bar-indicator-color-danger: var(--gl-status-danger-icon-color); /* Used for the indicator color for the danger progress-bar variant. */
+  --gl-progress-bar-indicator-color-warning: var(--gl-status-warning-icon-color); /* Used for the indicator color for the warning progress-bar variant. */
+  --gl-progress-bar-indicator-color-success: var(--gl-status-success-icon-color); /* Used for the indicator color for the success progress-bar variant. */
+  --gl-progress-bar-indicator-color-default: var(--gl-status-info-icon-color); /* Used for the indicator color for the primary progress-bar variant. */
   --gl-dropdown-option-background-color-selected-focus: var(--gl-dropdown-option-background-color-selected-hover); /* Used for the background of a selected dropdown option in the focus state. */
   --gl-dropdown-option-background-color-unselected-focus: var(--gl-action-neutral-background-color-focus); /* Used for the background of an unselected dropdown option in the focus state. */
   --gl-dropdown-option-indicator-color-selected-focus: var(--gl-color-neutral-0); /* Used for the dropdown selected option indicator in the focus state. */

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

@@ -668,6 +668,11 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the men
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#f5d9a8'; // Used for the mention link text color when referencing the current user.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the mention link default background.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#703800'; // Used for the mention link background when referencing the current user.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#428fdc'; // Used for the indicator color for the primary progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#2da160'; // Used for the indicator color for the success progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#c17d10'; // Used for the indicator color for the warning progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#ec5941'; // Used for the indicator color for the danger progress-bar variant.
+export const GL_PROGRESS_BAR_TRACK_COLOR = '#4c4b51'; // Used for the track color for all progress-bar variants.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#3a383f'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#4c4b51'; // Used for the animated shimmer effect in a skeleton loader.
 export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#3a383f'; // Used for the static track (background) of a loading spinner.

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

@@ -668,6 +668,11 @@ export const GL_LINK_MENTION_TEXT_COLOR_DEFAULT = '#0b5cad'; // Used for the men
 export const GL_LINK_MENTION_TEXT_COLOR_CURRENT = '#703800'; // Used for the mention link text color when referencing the current user.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_DEFAULT = '#cbe2f9'; // Used for the mention link default background.
 export const GL_LINK_MENTION_BACKGROUND_COLOR_CURRENT = '#f5d9a8'; // Used for the mention link background when referencing the current user.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DEFAULT = '#1f75cb'; // Used for the indicator color for the primary progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_SUCCESS = '#108548'; // Used for the indicator color for the success progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_WARNING = '#ab6100'; // Used for the indicator color for the warning progress-bar variant.
+export const GL_PROGRESS_BAR_INDICATOR_COLOR_DANGER = '#dd2b0e'; // Used for the indicator color for the danger progress-bar variant.
+export const GL_PROGRESS_BAR_TRACK_COLOR = '#bfbfc3'; // Used for the track color for all progress-bar variants.
 export const GL_SKELETON_LOADER_BACKGROUND_COLOR = '#dcdcde'; // Used for the skeleton loader background color.
 export const GL_SKELETON_LOADER_SHIMMER_COLOR = '#ececef'; // Used for the animated shimmer effect in a skeleton loader.
 export const GL_SPINNER_TRACK_COLOR_DEFAULT = '#dcdcde'; // Used for the static track (background) of a loading spinner.