@gitlab/ui 95.0.0 → 95.1.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# [95.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v95.0.0...v95.1.0) (2024-10-04)
+
+
+### Bug Fixes
+
+* don't open details modal if selecting close button via keyboard ([8e8a4c3](https://gitlab.com/gitlab-org/gitlab-ui/commit/8e8a4c3dc7fc9f30d4c02a3a9a4acf7da96c2aac))
+
+
+### Features
+
+* **GlDuoChat:** view context item content/details ([63909dd](https://gitlab.com/gitlab-org/gitlab-ui/commit/63909dd79aa2570ecd7375c22619d892ea1935c2))
+
 # [95.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v94.10.0...v95.0.0) (2024-10-04)
 
 

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

@@ -4,5 +4,8 @@ const CONTEXT_ITEM_CATEGORY_FILE = 'file';
 const CONTEXT_ITEM_CATEGORY_LOCAL_GIT = 'local_git';
 const CONTEXT_ITEM_LOCAL_GIT_COMMIT = 'commit';
 const CONTEXT_ITEM_LOCAL_GIT_DIFF = 'diff';
+const LANGUAGE_IDENTIFIER_PREFIX = 'language-';
+const LANGUAGE_IDENTIFIER_DIFF = 'language-diff';
+const LANGUAGE_IDENTIFIER_PLAINTEXT = 'language-plaintext';
 
-export { 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 };
+export { 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, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_details_modal/duo_chat_context_item_details_modal.js

@@ -0,0 +1,120 @@
+import { nextTick } from 'vue';
+import { contextItemValidator } from '../utils';
+import GlModal from '../../../../../../base/modal/modal';
+import { SafeHtmlDirective } from '../../../../../../../directives/safe_html/safe_html';
+import GlSkeletonLoader from '../../../../../../base/skeleton_loader/skeleton_loader';
+import { translate } from '../../../../../../../utils/i18n';
+import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PREFIX, LANGUAGE_IDENTIFIER_PLAINTEXT } from '../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatContextItemDetailsModal',
+  components: {
+    GlSkeletonLoader,
+    GlModal
+  },
+  directives: {
+    SafeHtml: SafeHtmlDirective
+  },
+  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() {
+      var _this$contextItem$met, _this$contextItem$met2, _this$contextItem$met3;
+      if (this.contextItem.category === CONTEXT_ITEM_CATEGORY_LOCAL_GIT) {
+        return LANGUAGE_IDENTIFIER_DIFF;
+      }
+      const fileExtension = (_this$contextItem$met = this.contextItem.metadata) === null || _this$contextItem$met === void 0 ? void 0 : (_this$contextItem$met2 = _this$contextItem$met.relativePath) === null || _this$contextItem$met2 === void 0 ? void 0 : _this$contextItem$met2.split('.').at(-1);
+      if (fileExtension && fileExtension !== ((_this$contextItem$met3 = this.contextItem.metadata) === null || _this$contextItem$met3 === void 0 ? void 0 : _this$contextItem$met3.relativePath)) {
+        return `${LANGUAGE_IDENTIFIER_PREFIX}${fileExtension}`;
+      }
+      return LANGUAGE_IDENTIFIER_PLAINTEXT;
+    },
+    title() {
+      var _this$contextItem$met4, _this$contextItem$met5;
+      return ((_this$contextItem$met4 = this.contextItem.metadata) === null || _this$contextItem$met4 === void 0 ? void 0 : _this$contextItem$met4.title) || ((_this$contextItem$met5 = this.contextItem.metadata) === null || _this$contextItem$met5 === void 0 ? void 0 : _this$contextItem$met5.relativePath) || translate('GlDuoChatContextItemDetailsModal.title', 'Preview');
+    }
+  },
+  watch: {
+    contextItem: {
+      async handler(newVal, oldVal) {
+        const shouldFormat = (newVal === null || newVal === void 0 ? void 0 : newVal.content) !== (oldVal === null || oldVal === void 0 ? void 0 : oldVal.content) && (newVal === null || newVal === void 0 ? void 0 : 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 */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('gl-modal',{attrs:{"modal-id":"context-item-details-modal","title":_vm.title,"visible":true,"scrollable":true,"hide-footer":"","size":"lg"},on:{"change":_vm.onModalVisibilityChange}},[(_vm.isLoadingContent)?_c('gl-skeleton-loader'):_c('div',{ref:"content",attrs:{"data-testid":"context-item-content"}},[_c('pre',{directives:[{name:"safe-html",rawName:"v-safe-html",value:(_vm.contextItem.content),expression:"contextItem.content"}],staticClass:"code js-syntax-highlight gl-p-3",class:_vm.languageIdentifierClass})])],1)};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = __vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export default __vue_component__;

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.js

@@ -209,6 +209,16 @@ var script = {
         }
       } while (!this.results[newIndex].metadata.enabled);
       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: {
@@ -220,7 +230,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',[(_vm.selections.length)?_c('gl-duo-chat-context-item-selections',{staticClass:"gl-mb-3",attrs:{"selections":_vm.selections,"removable":true,"title":_vm.$options.i18n.selectedContextItemsTitle,"default-collapsed":false},on:{"remove":_vm.removeItem}}):_vm._e(),_vm._v(" "),(_vm.open)?_c('gl-card',{staticClass:"slash-commands !gl-absolute gl-bottom-0 gl-w-full gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2","data-testid":"context-item-menu"}},[(_vm.showCategorySelection)?_c('gl-duo-chat-context-item-menu-category-items',{attrs:{"active-index":_vm.activeIndex,"categories":_vm.categories},on:{"select":_vm.selectCategory,"active-index-change":function($event){_vm.activeIndex = $event;}}}):_c('gl-duo-chat-context-item-menu-search-items',{attrs:{"active-index":_vm.activeIndex,"category":_vm.selectedCategory,"loading":_vm.loading,"error":_vm.error,"results":_vm.results},on:{"select":_vm.selectItem,"keyup":_vm.handleKeyUp,"active-index-change":function($event){_vm.activeIndex = $event;}},model:{value:(_vm.searchQuery),callback:function ($$v) {_vm.searchQuery=$$v;},expression:"searchQuery"}})],1):_vm._e()],1)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[(_vm.selections.length)?_c('gl-duo-chat-context-item-selections',{staticClass:"gl-mb-3",attrs:{"selections":_vm.selections,"categories":_vm.categories,"removable":true,"title":_vm.$options.i18n.selectedContextItemsTitle,"default-collapsed":false},on:{"remove":_vm.removeItem,"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.open)?_c('gl-card',{staticClass:"slash-commands !gl-absolute gl-bottom-0 gl-w-full gl-pl-0 gl-shadow-md",attrs:{"body-class":"!gl-p-2","data-testid":"context-item-menu"}},[(_vm.showCategorySelection)?_c('gl-duo-chat-context-item-menu-category-items',{attrs:{"active-index":_vm.activeIndex,"categories":_vm.categories},on:{"select":_vm.selectCategory,"active-index-change":function($event){_vm.activeIndex = $event;}}}):_c('gl-duo-chat-context-item-menu-search-items',{attrs:{"active-index":_vm.activeIndex,"category":_vm.selectedCategory,"loading":_vm.loading,"error":_vm.error,"results":_vm.results},on:{"select":_vm.selectItem,"keyup":_vm.handleKeyUp,"active-index-change":function($event){_vm.activeIndex = $event;}},model:{value:(_vm.searchQuery),callback:function ($$v) {_vm.searchQuery=$$v;},expression:"searchQuery"}})],1):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/components/duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.js

@@ -3,6 +3,8 @@ import GlIcon from '../../../../../../base/icon/icon';
 import GlToken from '../../../../../../base/token/token';
 import GlTruncate from '../../../../../../utilities/truncate/truncate';
 import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
+import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
+import GlDuoChatContextItemDetailsModal from '../duo_chat_context_item_details_modal/duo_chat_context_item_details_modal';
 import { contextItemsValidator, getContextItemIcon } from '../utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
@@ -10,6 +12,7 @@ var script = {
   name: 'GlDuoChatContextItemSelections',
   components: {
     GlTruncate,
+    GlDuoChatContextItemDetailsModal,
     GlIcon,
     GlDuoChatContextItemPopover,
     GlToken
@@ -54,7 +57,8 @@ var script = {
   data() {
     return {
       isCollapsed: this.defaultCollapsed,
-      selectionsId: uniqueId()
+      selectionsId: uniqueId(),
+      previewContextItemId: null
     };
   },
   computed: {
@@ -72,6 +76,9 @@ var script = {
         return 'gl-bg-blue-50 gl-text-blue-600';
       }
       return '';
+    },
+    contextItemPreview() {
+      return this.selections.find(item => item.id === this.previewContextItemId);
     }
   },
   methods: {
@@ -85,6 +92,26 @@ var script = {
        * @property {Object} item - The context contextItem to be removed
        */
       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;
     }
   }
 };
@@ -93,7 +120,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:"gl-flex gl-flex-col",class:_vm.variantClasses},[_c('button',{staticClass:"gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-inherit",attrs:{"data-testid":"chat-context-selections-title","type":"button"},on:{"click":_vm.toggleCollapse}},[_c('gl-icon',{attrs:{"name":_vm.collapseIconName,"data-testid":"chat-context-collapse-icon"}}),_vm._v(" "+_vm._s(_vm.title)+"\n  ")],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isCollapsed),expression:"!isCollapsed"}],staticClass:"gl-mt-1 gl-flex gl-grow gl-flex-wrap",attrs:{"data-testid":"chat-context-tokens-wrapper"}},_vm._l((_vm.selections),function(item){return _c('gl-token',{key:item.id,staticClass:"gl-mb-2 gl-mr-2 gl-max-w-full",class:_vm.tokenVariantClasses,attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"view-only":!_vm.removable,"variant":"default"},on:{"close":function($event){return _vm.onRemoveItem(item)}}},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-items-center",attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId)}},[(_vm.getContextItemIcon(item))?_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.getContextItemIcon(item),"size":12}}):_vm._e(),_vm._v(" "),_c('gl-truncate',{attrs:{"text":item.metadata.title,"position":"middle"}})],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":item,"target":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"placement":"bottom"}})],1)}),1)])};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:"gl-flex gl-flex-col",class:_vm.variantClasses},[_c('button',{staticClass:"gl-flex gl-w-full gl-items-center gl-border-0 gl-bg-transparent gl-p-0 gl-text-left gl-text-xs gl-lowercase gl-text-inherit",attrs:{"data-testid":"chat-context-selections-title","type":"button"},on:{"click":_vm.toggleCollapse}},[_c('gl-icon',{attrs:{"name":_vm.collapseIconName,"data-testid":"chat-context-collapse-icon"}}),_vm._v(" "+_vm._s(_vm.title)+"\n  ")],1),_vm._v(" "),_c('div',{directives:[{name:"show",rawName:"v-show",value:(!_vm.isCollapsed),expression:"!isCollapsed"}],staticClass:"gl-mt-1 gl-flex gl-grow gl-flex-wrap",attrs:{"data-testid":"chat-context-tokens-wrapper"}},_vm._l((_vm.selections),function(item){return _c('gl-token',{key:item.id,staticClass:"gl-mb-2 gl-mr-2 gl-max-w-full",class:_vm.tokenVariantClasses,attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"view-only":!_vm.removable,"variant":"default","tabindex":_vm.canOpen(item) ? 0 : -1,"role":_vm.canOpen(item) ? 'button' : undefined},on:{"click":function($event){return _vm.onOpenItem($event, item)},"keydown":[function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }return _vm.onOpenItem($event, item)},function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"space",32,$event.key,[" ","Spacebar"])){ return null; }$event.preventDefault();return _vm.onOpenItem($event, item)}],"close":function($event){return _vm.onRemoveItem(item)}}},[_c('div',{staticClass:"gl-flex gl-min-w-0 gl-items-center",attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId)}},[(_vm.getContextItemIcon(item))?_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.getContextItemIcon(item),"size":12}}):_vm._e(),_vm._v(" "),_c('gl-truncate',{attrs:{"text":item.metadata.title,"position":"middle"}})],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":item,"target":("context-item-" + (item.id) + "-" + _vm.selectionsId + "-token"),"placement":"bottom"},on:{"show-git-diff":function($event){return _vm.onOpenItem(item)}}})],1)}),1),_vm._v(" "),(_vm.contextItemPreview)?_c('gl-duo-chat-context-item-details-modal',{attrs:{"context-item":_vm.contextItemPreview},on:{"close":_vm.onClosePreview}}):_vm._e()],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -20,6 +20,19 @@ const MOCK_CATEGORIES = [{
 function getMockCategory(categoryValue) {
   return MOCK_CATEGORIES.find(cat => cat.value === categoryValue);
 }
+const MOCK_CONTEXT_FILE_CONTENT = `export function waterPlants() {
+    console.log('sprinkle');
+}`;
+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',
+ };`;
 const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
   category: CONTEXT_ITEM_CATEGORY_FILE,
@@ -175,4 +188,4 @@ const getMockContextItems = () => {
   return [...enabledItems, ...disabledItems];
 };
 
-export { MOCK_CATEGORIES, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockCategory, getMockContextItems };
+export { MOCK_CATEGORIES, MOCK_CONTEXT_FILE_CONTENT, MOCK_CONTEXT_FILE_DIFF_CONTENT, MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_GIT_COMMIT, MOCK_CONTEXT_ITEM_GIT_DIFF, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockCategory, getMockContextItems };

package/dist/components/experimental/duo/chat/components/duo_chat_conversation/duo_chat_conversation.js

@@ -54,6 +54,9 @@ var script = {
     },
     onInsertCodeSnippet(e) {
       this.$emit('insert-code-snippet', e);
+    },
+    onGetContextItemContent(e) {
+      this.$emit('get-context-item-content', e);
     }
   },
   i18n
@@ -63,7 +66,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',{class:['gl-flex gl-flex-col gl-justify-end', { 'insert-code-hidden': !_vm.enableCodeInsertion }]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-grow"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-grow"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('gl-duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId)},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet}})})],2)};
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:['gl-flex gl-flex-col gl-justify-end', { 'insert-code-hidden': !_vm.enableCodeInsertion }]},[(_vm.showDelimiter)?_c('div',{staticClass:"gl-my-5 gl-flex gl-items-center gl-gap-4 gl-text-gray-500",attrs:{"data-testid":"conversation-delimiter"}},[_c('hr',{staticClass:"gl-grow"}),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.$options.i18n.CONVERSATION_NEW_CHAT))]),_vm._v(" "),_c('hr',{staticClass:"gl-grow"})]):_vm._e(),_vm._v(" "),_vm._l((_vm.messages),function(msg,index){return _c('gl-duo-chat-message',{key:((msg.role) + "-" + index),attrs:{"message":msg,"is-cancelled":_vm.canceledRequestIds.includes(msg.requestId)},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"get-context-item-content":_vm.onGetContextItemContent}})})],2)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js

@@ -212,6 +212,12 @@ var script = {
     },
     onInsertCodeSnippet(e) {
       this.$emit('insert-code-snippet', e);
+    },
+    onGetContextItemContent(contextItem) {
+      this.$emit('get-context-item-content', {
+        messageId: this.message.id,
+        contextItem
+      });
     }
   }
 };
@@ -226,7 +232,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
       _vm.isAssistantMessage,
     'gl-bg-white': _vm.isAssistantMessage && !_vm.error,
     '!gl-border-none gl-bg-red-50': _vm.error,
-  },on:{"insert-code-snippet":_vm.onInsertCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"status_warning_borderless","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-loading-icon',{staticClass:"gl-pt-4",attrs:{"variant":"dots","inline":""}}):_vm._e(),_vm._v(" "),(_vm.isNotChunkOrCancelled)?_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)}):_vm._e()],1)]:_vm._e()],2),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"}}):_vm._e()],1)],1)};
+  },on:{"insert-code-snippet":_vm.onInsertCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600",attrs:{"aria-label":_vm.$options.i18n.MESSAGE_ERROR,"name":"status_warning_borderless","size":16,"data-testid":"error"}}):_vm._e(),_vm._v(" "),_c('div',{ref:"content-wrapper",class:{ 'has-error': _vm.error }},[(_vm.displaySelectedContextItems && _vm.isAssistantMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"assistant"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e(),_vm._v(" "),(_vm.error)?_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.renderedError),expression:"renderedError",arg:_vm.$options.safeHtmlConfigExtension}],ref:"error-message"}):_c('div',[_c('div',{directives:[{name:"safe-html",rawName:"v-safe-html:[$options.safeHtmlConfigExtension]",value:(_vm.messageContent),expression:"messageContent",arg:_vm.$options.safeHtmlConfigExtension}],ref:"content"}),_vm._v(" "),(_vm.isAssistantMessage)?[(_vm.sources)?_c('documentation-sources',{attrs:{"sources":_vm.sources}}):_vm._e(),_vm._v(" "),_c('div',{staticClass:"duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end"},[(_vm.isChunkAndNotCancelled)?_c('gl-loading-icon',{staticClass:"gl-pt-4",attrs:{"variant":"dots","inline":""}}):_vm._e(),_vm._v(" "),(_vm.isNotChunkOrCancelled)?_c('gl-duo-user-feedback',{attrs:{"feedback-received":_vm.hasFeedback,"modal-title":_vm.$options.i18n.MODAL.TITLE,"modal-alert":_vm.$options.i18n.MODAL.ALERT_TEXT},on:{"feedback":_vm.logEvent},scopedSlots:_vm._u([{key:"feedback-extra-fields",fn:function(){return [_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.DID_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.INTERACTION},model:{value:(_vm.didWhat),callback:function ($$v) {_vm.didWhat=$$v;},expression:"didWhat"}})],1),_vm._v(" "),_c('gl-form-group',{attrs:{"label":_vm.$options.i18n.MODAL.IMPROVE_WHAT,"optional":""}},[_c('gl-form-textarea',{attrs:{"placeholder":_vm.$options.i18n.MODAL.BETTER_RESPONSE},model:{value:(_vm.improveWhat),callback:function ($$v) {_vm.improveWhat=$$v;},expression:"improveWhat"}})],1)]},proxy:true}],null,false,419229417)}):_vm._e()],1)]:_vm._e()],2),_vm._v(" "),(_vm.displaySelectedContextItems && _vm.isUserMessage)?_c('gl-duo-chat-context-item-selections',{attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed,"variant":"user"},on:{"get-content":_vm.onGetContextItemContent}}):_vm._e()],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/dist/components/experimental/duo/chat/duo_chat.js

@@ -470,6 +470,14 @@ var script = {
        */
       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();
@@ -490,7 +498,7 @@ var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=
         {
           'gl-h-full': !_vm.hasMessages,
           'force-scroll-bar': _vm.hasMessages,
-        } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('gl-empty-state',{key:"empty-state",staticClass:"gl-flex-grow gl-justify-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle},scopedSlots:_vm._u([{key:"description",fn:function(){return [_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"gl-duo-chat-empty-state-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateDescription)+"\n            ")]),_vm._v(" "),_c('p',{staticClass:"gl-mt-3 gl-text-sm gl-text-subtle",attrs:{"data-testid":"gl-duo-chat-empty-state-secondary-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateSecondaryDescription)+"\n            ")])]},proxy:true}],null,false,460840487)}),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('gl-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)?_c('footer',{staticClass:"duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-t gl-bg-gray-10 gl-p-5",class:{ 'duo-chat-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },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('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [(_vm.displaySubmitButton)?_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base",attrs:{"icon":"stop","category":"primary","variant":"default","data-testid":"chat-prompt-cancel-button","aria-label":_vm.$options.i18n.CHAT_CANCEL_LABEL},on:{"click":_vm.cancelPrompt}})]},proxy:true}],null,false,677611116)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400",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-gray-500"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute !gl-h-full gl-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none",class:{ 'gl-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"autofocus":""},on:{"compositionend":_vm.compositionEnd},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)])],1)],1):_vm._e()]):_vm._e()};
+        } ],attrs:{"tag":"section","name":"message"}},[_vm._l((_vm.conversations),function(conversation,index){return _c('gl-duo-chat-conversation',{key:("conversation-" + index),attrs:{"enable-code-insertion":_vm.enableCodeInsertion,"messages":conversation,"canceled-request-ids":_vm.canceledRequestIds,"show-delimiter":index > 0},on:{"track-feedback":_vm.onTrackFeedback,"insert-code-snippet":_vm.onInsertCodeSnippet,"get-context-item-content":_vm.onGetContextItemContent}})}),_vm._v(" "),(!_vm.hasMessages && !_vm.isLoading)?[_c('gl-empty-state',{key:"empty-state",staticClass:"gl-flex-grow gl-justify-center",attrs:{"svg-path":_vm.$options.emptySvg,"svg-height":145,"title":_vm.emptyStateTitle},scopedSlots:_vm._u([{key:"description",fn:function(){return [_c('p',{staticClass:"gl-mb-3",attrs:{"data-testid":"gl-duo-chat-empty-state-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateDescription)+"\n            ")]),_vm._v(" "),_c('p',{staticClass:"gl-mt-3 gl-text-sm gl-text-subtle",attrs:{"data-testid":"gl-duo-chat-empty-state-secondary-description"}},[_vm._v("\n              "+_vm._s(_vm.emptyStateSecondaryDescription)+"\n            ")])]},proxy:true}],null,false,460840487)}),_vm._v(" "),_c('gl-duo-chat-predefined-prompts',{key:"predefined-prompts",attrs:{"prompts":_vm.predefinedPrompts},on:{"click":_vm.sendPredefinedPrompt}})]:_vm._e(),_vm._v(" "),(_vm.isLoading)?_c('gl-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)?_c('footer',{staticClass:"duo-chat-drawer-footer duo-chat-drawer-footer-sticky gl-border-t gl-bg-gray-10 gl-p-5",class:{ 'duo-chat-drawer-body-scrim-on-footer': !_vm.scrolledToBottom },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('gl-form-input-group',{scopedSlots:_vm._u([{key:"append",fn:function(){return [(_vm.displaySubmitButton)?_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base",attrs:{"icon":"paper-airplane","category":"primary","variant":"confirm","type":"submit","data-testid":"chat-prompt-submit-button","aria-label":_vm.$options.i18n.CHAT_SUBMIT_LABEL}}):_c('gl-button',{staticClass:"!gl-absolute gl-bottom-2 gl-right-2 !gl-rounded-base",attrs:{"icon":"stop","category":"primary","variant":"default","data-testid":"chat-prompt-cancel-button","aria-label":_vm.$options.i18n.CHAT_CANCEL_LABEL},on:{"click":_vm.cancelPrompt}})]},proxy:true}],null,false,677611116)},[_c('div',{staticClass:"duo-chat-input gl-min-h-8 gl-max-w-full gl-grow gl-rounded-base gl-bg-white gl-align-top gl-shadow-inner-1-gray-400",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-gray-500"},[_vm._v(_vm._s(command.description))])])])}),1):_vm._e(),_vm._v(" "),_c('gl-form-textarea',{ref:"prompt",staticClass:"gl-absolute !gl-h-full gl-rounded-br-none gl-rounded-tr-none !gl-bg-transparent !gl-py-4 !gl-shadow-none",class:{ 'gl-truncate': !_vm.prompt },attrs:{"data-testid":"chat-prompt-input","placeholder":_vm.inputPlaceholder,"autofocus":""},on:{"compositionend":_vm.compositionEnd},nativeOn:{"keydown":function($event){if(!$event.type.indexOf('key')&&_vm._k($event.keyCode,"enter",13,$event.key,"Enter")){ return null; }if($event.ctrlKey||$event.shiftKey||$event.altKey||$event.metaKey){ return null; }$event.preventDefault();},"keyup":function($event){return _vm.onInputKeyup.apply(null, arguments)}},model:{value:(_vm.prompt),callback:function ($$v) {_vm.prompt=$$v;},expression:"prompt"}})],1)])],1)],1):_vm._e()]):_vm._e()};
 var __vue_staticRenderFns__ = [];
 
   /* style */

package/package.json

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

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

@@ -27,6 +27,7 @@ export default {
   'GlDuoChat.chatPromptPlaceholderDefault': 'GitLab Duo Chat',
   'GlDuoChat.chatPromptPlaceholderWithCommands': 'Type "/" for slash commands',
   'GlDuoChat.chatSubmitLabel': 'Send chat message.',
+  'GlDuoChatContextItemDetailsModal.title': 'Preview',
   'GlDuoChatContextItemMenu.emptyStateMessage': 'No results found',
   'GlDuoChatContextItemMenu.loadingMessage': 'Loading...',
   'GlDuoChatContextItemMenu.searchInputPlaceholder': 'Search %{categoryLabel}...',