@gitlab/ui 90.5.0 → 91.1.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [91.1.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v91.0.0...v91.1.0) (2024-08-29)
+
+
+### Features
+
+* **GlDuoChat:** display attached context in chat messages ([be92188](https://gitlab.com/gitlab-org/gitlab-ui/commit/be92188062f895f5f27117f501d4b31ba52ac598))
+
+# [91.0.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v90.5.0...v91.0.0) (2024-08-29)
+
+
+### Code Refactoring
+
+* **Path:** Update to tokens ([f57c5e4](https://gitlab.com/gitlab-org/gitlab-ui/commit/f57c5e48d73f9ccb143ddf60e6b604dd84d129ee))
+
+
+### BREAKING CHANGES
+
+* **Path:** Replace SCSS variables with design tokens for the
+Path component and make some minor design tweaks. Remove theme option.
+
 # [90.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v90.4.0...v90.5.0) (2024-08-28)
 
 

package/dist/components/base/path/path.js

@@ -2,14 +2,13 @@ import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
 import uniqueId from 'lodash/uniqueId';
 import findLast from 'lodash/findLast';
 import { GlResizeObserverDirective } from '../../../directives/resize_observer/resize_observer';
-import { glThemes } from '../../../utils/constants';
 import GlIcon from '../icon/icon';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 //
 const BOUNDARY_WIDTH = 40;
 const PATH_ITEM_CLASS = 'gl-path-button';
-const PATH_ACTIVE_ITEM_PREFIX = 'gl-path-active-item';
+const PATH_ACTIVE_ITEM_CLASS = 'gl-path-active-item';
 var script = {
   name: 'GlPath',
   components: {
@@ -35,15 +34,6 @@ var script = {
       required: false,
       default: () => []
     },
-    /**
-     * The color theme to be used.
-     */
-    theme: {
-      type: String,
-      required: false,
-      default: 'indigo',
-      validator: theme => glThemes.includes(theme)
-    },
     /**
      * The items' background color.
      */
@@ -61,9 +51,6 @@ var script = {
     };
   },
   computed: {
-    activeClass() {
-      return `${PATH_ACTIVE_ITEM_PREFIX}-${this.theme}`;
-    },
     entireListVisible() {
       return this.width >= this.getScrollWidth();
     },
@@ -95,7 +82,7 @@ var script = {
   },
   methods: {
     pathItemClass(index) {
-      return index === this.selectedIndex ? `${PATH_ITEM_CLASS} ${this.activeClass}` : PATH_ITEM_CLASS;
+      return index === this.selectedIndex ? `${PATH_ITEM_CLASS} ${PATH_ACTIVE_ITEM_CLASS}` : PATH_ITEM_CLASS;
     },
     onItemClicked(selectedIndex) {
       this.selectedIndex = selectedIndex;

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

@@ -0,0 +1,5 @@
+const CONTEXT_ITEM_TYPE_ISSUE = 'issue';
+const CONTEXT_ITEM_TYPE_MERGE_REQUEST = 'merge_request';
+const CONTEXT_ITEM_TYPE_PROJECT_FILE = 'project_file';
+
+export { CONTEXT_ITEM_TYPE_ISSUE, CONTEXT_ITEM_TYPE_MERGE_REQUEST, CONTEXT_ITEM_TYPE_PROJECT_FILE };

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

@@ -0,0 +1,93 @@
+import GlPopover from '../../../../../../base/popover/popover';
+import { translate } from '../../../../../../../utils/i18n';
+import { CONTEXT_ITEM_TYPE_ISSUE, CONTEXT_ITEM_TYPE_MERGE_REQUEST, CONTEXT_ITEM_TYPE_PROJECT_FILE } from '../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const ID_PREFIXES = {
+  issue: '#',
+  merge_request: '!'
+};
+var script = {
+  name: 'DuoChatContextItemPopover',
+  components: {
+    GlPopover
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    target: {
+      type: String,
+      required: true
+    },
+    placement: {
+      type: String,
+      default: 'bottom',
+      required: false
+    }
+  },
+  computed: {
+    itemInfo() {
+      var _this$item$metadata;
+      return ((_this$item$metadata = this.item.metadata) === null || _this$item$metadata === void 0 ? void 0 : _this$item$metadata.info) || {};
+    },
+    id() {
+      const isIssuable = this.item.type === CONTEXT_ITEM_TYPE_ISSUE || this.item.type === CONTEXT_ITEM_TYPE_MERGE_REQUEST;
+      return isIssuable ? this.itemInfo.iid || '' : null;
+    },
+    idPrefix() {
+      return ID_PREFIXES[this.item.type] || '';
+    },
+    filePath() {
+      return this.item.type === CONTEXT_ITEM_TYPE_PROJECT_FILE ? this.itemInfo.relFilePath || '' : null;
+    },
+    isEnabled() {
+      return this.item.isEnabled !== false;
+    },
+    disabledMessage() {
+      return Array.isArray(this.item.disabledReasons) && this.item.disabledReasons.length > 0 ? this.item.disabledReasons.join(', ') : translate('DuoChatContextItemPopover.DisabledReason', 'This item is disabled');
+    }
+  },
+  methods: {
+    translate
+  }
+};
+
+/* 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-popover',{attrs:{"target":_vm.target,"triggers":"hover focus","placement":_vm.placement,"title":_vm.item.metadata.name,"custom-class":"gl-duo-chat-item-popover"},scopedSlots:_vm._u([{key:"title",fn:function(){return [_c('span',{staticClass:"gl-text-sm gl-text-gray-500",attrs:{"data-testid":"chat-context-popover-title"}},[_vm._v(_vm._s(_vm.item.metadata.name))])]},proxy:true}])},[_vm._v(" "),_c('div',{staticClass:"gl-p-3"},[_c('div',{staticClass:"gl-mb-2"},[_c('strong',{staticClass:"gl-mr-1"},[_vm._v(_vm._s(_vm.translate('DuoChatContextItemPopover.ProjectLabel', 'Project:')))]),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.itemInfo.project))])]),_vm._v(" "),(_vm.filePath !== null)?_c('div',{staticClass:"gl-mb-2"},[_c('strong',{staticClass:"gl-mr-1"},[_vm._v(_vm._s(_vm.translate('DuoChatContextItemPopover.PathLabel', 'Path:')))]),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.filePath))])]):_vm._e(),_vm._v(" "),(_vm.id !== null)?_c('div',{staticClass:"gl-mb-2"},[_c('strong',{staticClass:"gl-mr-1"},[_vm._v(_vm._s(_vm.translate('DuoChatContextItemPopover.IdLabel', 'ID:')))]),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.idPrefix)+_vm._s(_vm.id))])]):_vm._e(),_vm._v(" "),_c('div',{staticClass:"gl-mb-2"},[_c('strong',{staticClass:"gl-mr-1"},[_vm._v(_vm._s(_vm.translate('DuoChatContextItemPopover.TypeLabel', 'Type:')))]),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.item.type))])]),_vm._v(" "),(!_vm.isEnabled)?_c('div',{staticClass:"gl-text-red-500",attrs:{"data-testid":"chat-context-popover-disabled"}},[_c('strong',{staticClass:"gl-mr-1"},[_vm._v(_vm._s(_vm.translate('DuoChatContextItemPopover.DisabledMessageLabel', 'Note:')))]),_vm._v(" "),_c('span',[_vm._v(_vm._s(_vm.disabledMessage))])]):_vm._e()])])};
+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_selections/duo_chat_context_item_selections.js

@@ -0,0 +1,91 @@
+import uniqueId from 'lodash/uniqueId';
+import GlIcon from '../../../../../../base/icon/icon';
+import GlToken from '../../../../../../base/token/token';
+import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
+import { CONTEXT_ITEM_TYPE_PROJECT_FILE, CONTEXT_ITEM_TYPE_ISSUE, CONTEXT_ITEM_TYPE_MERGE_REQUEST } from '../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatContextItemSelections',
+  components: {
+    GlIcon,
+    GlDuoChatContextItemPopover,
+    GlToken
+  },
+  props: {
+    selections: {
+      type: Array,
+      required: true
+    },
+    title: {
+      type: String,
+      required: true
+    },
+    defaultCollapsed: {
+      type: Boolean,
+      required: true
+    }
+  },
+  data() {
+    return {
+      isCollapsed: this.defaultCollapsed,
+      selectionsId: uniqueId()
+    };
+  },
+  computed: {
+    collapseIconName() {
+      return this.isCollapsed ? 'chevron-right' : 'chevron-down';
+    }
+  },
+  methods: {
+    getIconName(type) {
+      const iconMap = {
+        [CONTEXT_ITEM_TYPE_PROJECT_FILE]: 'document',
+        [CONTEXT_ITEM_TYPE_ISSUE]: 'issues',
+        [CONTEXT_ITEM_TYPE_MERGE_REQUEST]: 'merge-request'
+      };
+      return iconMap[type] || 'document';
+    },
+    toggleCollapse() {
+      this.isCollapsed = !this.isCollapsed;
+    }
+  }
+};
+
+/* 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-mb-3 gl-flex gl-flex-col"},[_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-gray-500",attrs:{"data-testid":"chat-context-selections-title"},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",attrs:{"view-only":true,"variant":"default"}},[_c('div',{staticClass:"gl-flex gl-items-center",attrs:{"id":("context-item-" + (item.id) + "-" + _vm.selectionsId)}},[_c('gl-icon',{staticClass:"gl-mr-1",attrs:{"name":_vm.getIconName(item.type),"size":12}}),_vm._v("\n        "+_vm._s(item.metadata.name)+"\n      ")],1),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"item":item,"target":("context-item-" + (item.id) + "-" + _vm.selectionsId),"placement":"bottom"}})],1)}),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/mock_context_data.js

@@ -0,0 +1,121 @@
+const MOCK_CONTEXT_ITEM_FILE = {
+  id: '123e4567-e89b-12d3-a456-426614174000',
+  isEnabled: true,
+  metadata: {
+    name: 'strawberry.ts',
+    info: {
+      project: 'example/garden',
+      relFilePath: 'src/plants/strawberry.ts'
+    }
+  },
+  type: 'project_file'
+};
+const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
+  id: '323e4567-e89b-12d3-a456-426614174002',
+  isEnabled: false,
+  metadata: {
+    name: 'motorbike.cs',
+    info: {
+      project: 'example/vehicles',
+      relFilePath: '/src/VehicleFoo/motorbike.cs'
+    }
+  },
+  type: 'project_file'
+};
+const mockFiles = [MOCK_CONTEXT_ITEM_FILE, {
+  id: '223e4567-e89b-12d3-a456-426614174001',
+  isEnabled: true,
+  metadata: {
+    name: 'potato.ts',
+    info: {
+      project: 'example/garden',
+      relFilePath: '/src/plants/potato.ts'
+    }
+  },
+  type: 'project_file'
+}, MOCK_CONTEXT_ITEM_FILE_DISABLED];
+const MOCK_CONTEXT_ITEM_ISSUE = {
+  id: '423e4567-e89b-12d3-a456-426614174003',
+  isEnabled: true,
+  metadata: {
+    name: 'Implement watering schedule',
+    info: {
+      project: 'example/garden',
+      iid: 1234
+    }
+  },
+  type: 'issue'
+};
+const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
+  id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
+  isEnabled: false,
+  metadata: {
+    name: 'Fix vehicle colours',
+    info: {
+      project: 'example/vehicle',
+      iid: 91011
+    }
+  },
+  disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+  type: 'issue'
+};
+const mockIssues = [MOCK_CONTEXT_ITEM_ISSUE, {
+  id: '523e4567-e89b-12d3-a456-426614174004',
+  isEnabled: true,
+  metadata: {
+    name: 'Refactor plant growth rates',
+    info: {
+      project: 'example/garden',
+      iid: 5678
+    }
+  },
+  type: 'issue'
+}, MOCK_CONTEXT_ITEM_ISSUE_DISABLED];
+const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
+  id: '623e4567-e89b-12d3-a456-426614174005',
+  isEnabled: true,
+  metadata: {
+    name: 'Improve database performance',
+    info: {
+      project: 'example/garden',
+      iid: 1122
+    }
+  },
+  type: 'merge_request'
+};
+const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
+  id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
+  isEnabled: false,
+  metadata: {
+    name: 'Fix broken layout at small viewports',
+    info: {
+      project: 'example/vehicle',
+      iid: 5566
+    }
+  },
+  disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+  type: 'merge_request'
+};
+const mockMergeRequests = [MOCK_CONTEXT_ITEM_MERGE_REQUEST, {
+  id: '723e4567-e89b-12d3-a456-426614174006',
+  isEnabled: false,
+  metadata: {
+    name: 'Add vehicle registration details',
+    info: {
+      project: 'example/vehicle',
+      iid: 3344
+    }
+  },
+  disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
+  type: 'merge_request'
+}, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED];
+const getMockContextItems = () => {
+  const allItems = [...mockFiles, ...mockIssues, ...mockMergeRequests];
+
+  // put disabled items in the back
+  const disabledItems = allItems.filter(item => !item.isEnabled);
+  const enabledItems = allItems.filter(item => item.isEnabled);
+  return [...enabledItems, ...disabledItems];
+};
+
+export { MOCK_CONTEXT_ITEM_FILE, MOCK_CONTEXT_ITEM_FILE_DISABLED, MOCK_CONTEXT_ITEM_ISSUE, MOCK_CONTEXT_ITEM_ISSUE_DISABLED, MOCK_CONTEXT_ITEM_MERGE_REQUEST, MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED, getMockContextItems };

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

@@ -1,10 +1,12 @@
 import GlIcon from '../../../../../base/icon/icon';
 import GlLoadingIcon from '../../../../../base/loading_icon/loading_icon';
 import { GlTooltipDirective } from '../../../../../../directives/tooltip';
+import GlDuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections';
 import GlDuoUserFeedback from '../../../user_feedback/user_feedback';
 import GlFormGroup from '../../../../../base/form/form_group/form_group';
 import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea';
 import { SafeHtmlDirective } from '../../../../../../directives/safe_html/safe_html';
+import { translatePlural, sprintf } from '../../../../../../utils/i18n';
 import { MESSAGE_MODEL_ROLES } from '../../constants';
 import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources';
 import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
@@ -32,6 +34,7 @@ var script = {
   },
   components: {
     DocumentationSources,
+    GlDuoChatContextItemSelections,
     GlDuoUserFeedback,
     GlFormGroup,
     GlFormTextarea,
@@ -129,6 +132,26 @@ var script = {
     error() {
       var _this$message, _this$message$errors2;
       return Boolean((_this$message = this.message) === null || _this$message === void 0 ? void 0 : (_this$message$errors2 = _this$message.errors) === null || _this$message$errors2 === void 0 ? void 0 : _this$message$errors2.length) && this.message.errors.join('; ');
+    },
+    selectedContextItems() {
+      var _this$message$extras3;
+      return ((_this$message$extras3 = this.message.extras) === null || _this$message$extras3 === void 0 ? void 0 : _this$message$extras3.contextItems) || [];
+    },
+    displaySelectedContextItems() {
+      return Boolean(this.selectedContextItems.length);
+    },
+    selectedContextItemsDefaultCollapsed() {
+      return this.isAssistantMessage;
+    },
+    selectedContextItemsTitle() {
+      if (!this.displaySelectedContextItems) return '';
+      const count = this.selectedContextItems.length;
+      if (this.isUserMessage) {
+        return translatePlural('GlDuoChatMessage.SelectedContextItemsTitleUserMessage', 'Included reference', 'Included references')(count);
+      }
+      return sprintf(translatePlural('GlDuoChatMessage.SelectedContextItemsTitleAssistantMessage', 'Used %{count} included reference', 'Used %{count} included references')(count), {
+        count
+      });
     }
   },
   beforeCreate() {
@@ -205,7 +228,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-flex-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.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)])],1)};
+  },on:{"insert-code-snippet":_vm.onInsertCodeSnippet}},[(_vm.error)?_c('gl-icon',{staticClass:"error-icon gl-border gl-mr-3 gl-flex-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)?_c('gl-duo-chat-context-item-selections',{staticClass:"gl-mb-3",attrs:{"selections":_vm.selectedContextItems,"title":_vm.selectedContextItemsTitle,"default-collapsed":_vm.selectedContextItemsDefaultCollapsed}}):_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)],1)],1)};
 var __vue_staticRenderFns__ = [];
 
   /* style */

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

@@ -1,6 +1,7 @@
 import { setStoryTimeout } from '../../../../utils/test_utils';
 import { InsertCodeSnippetElement } from './components/duo_chat_message/insert_code_snippet_element';
 import { DOCUMENTATION_SOURCE_TYPES, MESSAGE_MODEL_ROLES, CHAT_RESET_MESSAGE, CHAT_CLEAN_MESSAGE } from './constants';
+import { getMockContextItems } from './components/duo_chat_context/mock_context_data';
 
 const MOCK_SOURCES = [{
   title: 'GitLab Handbook',
@@ -23,7 +24,8 @@ const MOCK_RESPONSE_MESSAGE = {
   contentHtml: '<p data-sourcepos="1:1-1:56" dir="auto">Here is a simple JavaScript function to sum two numbers:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="3:1-7:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">function</span> <span class="nf">sum</span><span class="p">(</span><span class="nx">a</span><span class="p">,</span> <span class="nx">b</span><span class="p">)</span> <span class="p">{</span></span>\n<span id="LC2" class="line" lang="javascript">  <span class="k">return</span> <span class="nx">a</span> <span class="o">+</span> <span class="nx">b</span><span class="p">;</span></span>\n<span id="LC3" class="line" lang="javascript"><span class="p">}</span></span></code></pre>\n<copy-code></copy-code>\n<insert-code-snippet></insert-code-snippet>\n</div>\n<p data-sourcepos="9:1-9:10" dir="auto">To use it:</p>\n<div class="gl-relative markdown-code-block js-markdown-code">\n<pre data-sourcepos="11:1-13:3" data-canonical-lang="js" class="code highlight js-syntax-highlight language-javascript" lang="javascript" v-pre="true"><code><span id="LC1" class="line" lang="javascript"><span class="kd">const</span> <span class="nx">result</span> <span class="o">=</span> <span class="nf">sum</span><span class="p">(</span><span class="mi">5</span><span class="p">,</span> <span class="mi">3</span><span class="p">);</span> <span class="c1">// result = 8</span></span></code></pre>\n<copy-code></copy-code>\n</div>\n<p data-sourcepos="15:1-15:95" dir="auto">This function takes two number parameters, a and b. It returns the sum of adding them together.</p>',
   role: MESSAGE_MODEL_ROLES.assistant,
   extras: {
-    sources: MOCK_SOURCES
+    sources: MOCK_SOURCES,
+    contextItems: getMockContextItems().slice(0, 2)
   },
   requestId: '987',
   errors: [],
@@ -67,7 +69,9 @@ const MOCK_RESPONSE_MESSAGE_FOR_STREAMING = {
   which is rendered while streaming.
   `,
   role: 'assistant',
-  extras: {},
+  extras: {
+    contextItems: getMockContextItems().slice(0, 2)
+  },
   requestId: '987',
   errors: [],
   timestamp: '2021-04-21T12:00:00.000Z'
@@ -122,7 +126,9 @@ const MOCK_USER_PROMPT_MESSAGE = {
   requestId: '987',
   errors: [],
   timestamp: '2021-04-21T12:00:00.000Z',
-  extras: null
+  extras: {
+    contextItems: getMockContextItems().slice(0, 2)
+  }
 };
 const renderMarkdown = content => content;
 const renderGFM = el => {