@gitlab/ui 91.4.0 → 91.6.0

package/dist/tokens/build/js/tokens.dark.js

@@ -316,23 +316,23 @@ const DATA_VIZ_ORANGE_950 = '#fae8d1';
 const GL_ALERT_NEUTRAL_TITLE_COLOR = '#fff'; // Used for the title color of a neutral alert.
 const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a neutral alert.
 const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = '#89888d'; // Used for the border center color of a neutral alert.
-const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a neutral alert.
+const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a neutral alert.
 const GL_ALERT_INFO_TITLE_COLOR = '#63a6e9'; // Used for the title color of an info alert.
 const GL_ALERT_INFO_BACKGROUND_COLOR = '#28272d'; // Used for the background color of an info alert.
 const GL_ALERT_INFO_BORDER_TOP_COLOR = '#428fdc'; // Used for the border color of an info alert.
-const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of an info alert.
+const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of an info alert.
 const GL_ALERT_SUCCESS_TITLE_COLOR = '#52b87a'; // Used for the title color of a success alert.
 const GL_ALERT_SUCCESS_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a success alert.
 const GL_ALERT_SUCCESS_BORDER_TOP_COLOR = '#2da160'; // Used for the border color of a success alert.
-const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a success alert.
+const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a success alert.
 const GL_ALERT_WARNING_TITLE_COLOR = '#d99530'; // Used for the title color of a warning alert.
 const GL_ALERT_WARNING_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a warning alert.
 const GL_ALERT_WARNING_BORDER_TOP_COLOR = '#c17d10'; // Used for the border color of a warning alert.
-const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a warning alert.
+const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a warning alert.
 const GL_ALERT_DANGER_TITLE_COLOR = '#f57f6c'; // Used for the title color of a danger alert.
 const GL_ALERT_DANGER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a danger alert.
 const GL_ALERT_DANGER_BORDER_TOP_COLOR = '#ec5941'; // Used for the border color of a danger alert.
-const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a danger alert.
+const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a danger alert.
 const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; // Used to define the edge of an avatar.
 const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
 const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#fcb5aa'; // Red text color for avatar fallback with no particular meaning.

package/dist/tokens/css/tokens.dark.css

@@ -666,15 +666,15 @@
   --gl-avatar-fallback-text-color-red: var(--gl-color-red-200); /* Red text color for avatar fallback with no particular meaning. */
   --gl-avatar-border-color-hover: var(--gl-color-alpha-light-24); /* Used to increase the edge definition of an avatar in the hover state. */
   --gl-avatar-border-color-default: var(--gl-color-alpha-light-8); /* Used to define the edge of an avatar. */
-  --gl-alert-danger-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a danger alert. */
+  --gl-alert-danger-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a danger alert. */
   --gl-alert-danger-border-top-color: var(--gl-color-red-400); /* Used for the border color of a danger alert. */
-  --gl-alert-warning-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a warning alert. */
+  --gl-alert-warning-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a warning alert. */
   --gl-alert-warning-border-top-color: var(--gl-color-orange-400); /* Used for the border color of a warning alert. */
-  --gl-alert-success-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a success alert. */
+  --gl-alert-success-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a success alert. */
   --gl-alert-success-border-top-color: var(--gl-color-green-400); /* Used for the border color of a success alert. */
-  --gl-alert-info-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of an info alert. */
+  --gl-alert-info-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of an info alert. */
   --gl-alert-info-border-top-color: var(--gl-color-blue-400); /* Used for the border color of an info alert. */
-  --gl-alert-neutral-border-bottom-color: var(--gl-color-neutral-800); /* Used for the border bottom color of a neutral alert. */
+  --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */
   --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */
   --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
   --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */

package/dist/tokens/js/tokens.dark.js

@@ -316,23 +316,23 @@ export const DATA_VIZ_ORANGE_950 = '#fae8d1';
 export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#fff'; // Used for the title color of a neutral alert.
 export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a neutral alert.
 export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = '#89888d'; // Used for the border center color of a neutral alert.
-export const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a neutral alert.
+export const GL_ALERT_NEUTRAL_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a neutral alert.
 export const GL_ALERT_INFO_TITLE_COLOR = '#63a6e9'; // Used for the title color of an info alert.
 export const GL_ALERT_INFO_BACKGROUND_COLOR = '#28272d'; // Used for the background color of an info alert.
 export const GL_ALERT_INFO_BORDER_TOP_COLOR = '#428fdc'; // Used for the border color of an info alert.
-export const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of an info alert.
+export const GL_ALERT_INFO_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of an info alert.
 export const GL_ALERT_SUCCESS_TITLE_COLOR = '#52b87a'; // Used for the title color of a success alert.
 export const GL_ALERT_SUCCESS_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a success alert.
 export const GL_ALERT_SUCCESS_BORDER_TOP_COLOR = '#2da160'; // Used for the border color of a success alert.
-export const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a success alert.
+export const GL_ALERT_SUCCESS_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a success alert.
 export const GL_ALERT_WARNING_TITLE_COLOR = '#d99530'; // Used for the title color of a warning alert.
 export const GL_ALERT_WARNING_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a warning alert.
 export const GL_ALERT_WARNING_BORDER_TOP_COLOR = '#c17d10'; // Used for the border color of a warning alert.
-export const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a warning alert.
+export const GL_ALERT_WARNING_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a warning alert.
 export const GL_ALERT_DANGER_TITLE_COLOR = '#f57f6c'; // Used for the title color of a danger alert.
 export const GL_ALERT_DANGER_BACKGROUND_COLOR = '#28272d'; // Used for the background color of a danger alert.
 export const GL_ALERT_DANGER_BORDER_TOP_COLOR = '#ec5941'; // Used for the border color of a danger alert.
-export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = '#3a383f'; // Used for the border bottom color of a danger alert.
+export const GL_ALERT_DANGER_BORDER_BOTTOM_COLOR = 'transparent'; // Used for the border bottom color of a danger alert.
 export const GL_AVATAR_BORDER_COLOR_DEFAULT = 'rgba(255, 255, 255, 0.08)'; // Used to define the edge of an avatar.
 export const GL_AVATAR_BORDER_COLOR_HOVER = 'rgba(255, 255, 255, 0.24)'; // Used to increase the edge definition of an avatar in the hover state.
 export const GL_AVATAR_FALLBACK_TEXT_COLOR_RED = '#fcb5aa'; // Red text color for avatar fallback with no particular meaning.

package/dist/tokens/json/tokens.dark.json

@@ -6353,16 +6353,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of a neutral alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a neutral alert."
             },
@@ -6459,16 +6456,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of an info alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of an info alert."
             },
@@ -6565,16 +6559,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of a success alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a success alert."
             },
@@ -6671,16 +6662,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of a warning alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a warning alert."
             },
@@ -6777,16 +6765,13 @@
         },
         "bottom": {
           "color": {
-            "value": "#3a383f",
+            "value": "transparent",
             "$type": "color",
             "comment": "Used for the border bottom color of a danger alert.",
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a danger alert."
             },

package/dist/tokens/json/tokens.json

@@ -6359,10 +6359,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a neutral alert."
             },
@@ -6465,10 +6462,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of an info alert."
             },
@@ -6571,10 +6565,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a success alert."
             },
@@ -6677,10 +6668,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a warning alert."
             },
@@ -6783,10 +6771,7 @@
             "filePath": "src/tokens/contextual/alert.tokens.json",
             "isSource": true,
             "original": {
-              "value": {
-                "default": "{color.alpha.0}",
-                "dark": "{color.neutral.800}"
-              },
+              "value": "{color.alpha.0}",
               "$type": "color",
               "comment": "Used for the border bottom color of a danger alert."
             },

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

@@ -664,15 +664,15 @@ $gl-avatar-fallback-text-color-purple: $gl-color-purple-200; // Purple text colo
 $gl-avatar-fallback-text-color-red: $gl-color-red-200; // Red text color for avatar fallback with no particular meaning.
 $gl-avatar-border-color-hover: $gl-color-alpha-light-24; // Used to increase the edge definition of an avatar in the hover state.
 $gl-avatar-border-color-default: $gl-color-alpha-light-8; // Used to define the edge of an avatar.
-$gl-alert-danger-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a danger alert.
+$gl-alert-danger-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a danger alert.
 $gl-alert-danger-border-top-color: $gl-color-red-400; // Used for the border color of a danger alert.
-$gl-alert-warning-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a warning alert.
+$gl-alert-warning-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a warning alert.
 $gl-alert-warning-border-top-color: $gl-color-orange-400; // Used for the border color of a warning alert.
-$gl-alert-success-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a success alert.
+$gl-alert-success-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a success alert.
 $gl-alert-success-border-top-color: $gl-color-green-400; // Used for the border color of a success alert.
-$gl-alert-info-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of an info alert.
+$gl-alert-info-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of an info alert.
 $gl-alert-info-border-top-color: $gl-color-blue-400; // Used for the border color of an info alert.
-$gl-alert-neutral-border-bottom-color: $gl-color-neutral-800; // Used for the border bottom color of a neutral alert.
+$gl-alert-neutral-border-bottom-color: $gl-color-alpha-0; // Used for the border bottom color of a neutral alert.
 $gl-alert-neutral-border-top-color: $gl-color-neutral-400; // Used for the border center color of a neutral alert.
 $gl-border-color-transparent: $gl-color-alpha-0; // Used when a border needs to be present, but not visibly perceived.
 $gl-border-color-strong: $gl-color-neutral-400; // Used for a distinct border that emphasizes an edge or boundaries.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "91.4.0",
+  "version": "91.6.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -111,7 +111,7 @@
     "@babel/preset-env": "^7.25.4",
     "@babel/preset-react": "^7.24.7",
     "@cypress/grep": "^4.0.1",
-    "@gitlab/eslint-plugin": "20.0.0",
+    "@gitlab/eslint-plugin": "20.1.0",
     "@gitlab/fonts": "^1.3.0",
     "@gitlab/stylelint-config": "6.2.1",
     "@gitlab/svgs": "3.114.0",
@@ -148,7 +148,7 @@
     "babel-loader": "^8.0.5",
     "bootstrap": "4.6.2",
     "cobertura-merge": "^1.0.4",
-    "cypress": "13.13.3",
+    "cypress": "13.14.1",
     "cypress-axe": "^1.4.0",
     "cypress-real-events": "^1.11.0",
     "dompurify": "^3.1.2",

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

@@ -0,0 +1,168 @@
+<script>
+import { translate } from '../../../../../../../utils/i18n';
+import GlCard from '../../../../../../base/card/card.vue';
+import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
+import { categoriesValidator, contextItemsValidator } from '../utils';
+
+export default {
+  name: 'GlDuoChatContextItemMenu',
+  components: {
+    GlCard,
+    GlDuoChatContextItemSelections,
+  },
+  props: {
+    /**
+     * Whether the menu is open.
+     */
+    open: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * Array of selected context items.
+     */
+    selections: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator,
+    },
+    /**
+     * Whether the menu is in a loading state.
+     */
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+    /**
+     * Error message to display, if any.
+     */
+    error: {
+      type: [String, null],
+      required: false,
+      default: null,
+    },
+    /**
+     * Array of available categories for context items.
+     */
+    categories: {
+      type: Array,
+      required: true,
+      validator: categoriesValidator,
+    },
+    /**
+     * Array of search results for context items.
+     */
+    results: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator,
+    },
+  },
+  data() {
+    return {
+      selectedCategory: null,
+    };
+  },
+  computed: {
+    showCategorySelection() {
+      return this.open && !this.selectedCategory;
+    },
+  },
+  watch: {
+    open(isOpen) {
+      if (!isOpen) {
+        this.resetSelection();
+      }
+    },
+  },
+  methods: {
+    selectCategory(category) {
+      this.selectedCategory = category;
+
+      /**
+       * Emitted when a search should be performed.
+       * @property {Object} filter
+       * @property {string} filter.category - The value of the selected category
+       * @property {string} filter.query - The search query
+       */
+      this.$emit('search', {
+        category: category.value,
+        query: '',
+      });
+    },
+    selectItem(item) {
+      if (!item.isEnabled) {
+        return;
+      }
+
+      /**
+       * Emitted when a context item is selected.
+       * @property {Object} item - The selected context item
+       */
+      this.$emit(
+        'select',
+        this.results.find((result) => result.id === item.id)
+      );
+
+      /**
+       * Emitted when the menu should be closed.
+       */
+      this.$emit('close');
+      this.resetSelection();
+    },
+    removeItem(item) {
+      /**
+       * Emitted when a context item should be removed.
+       * @property {Object} item - The context item to be removed
+       */
+      this.$emit('remove', item);
+    },
+    resetSelection() {
+      this.selectedCategory = null;
+    },
+  },
+  i18n: {
+    selectedContextItemsTitle: translate(
+      'GlDuoChatContextItemMenu.selectedContextItemsTitle',
+      'Included references'
+    ),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-duo-chat-context-item-selections
+      v-if="selections.length"
+      :selections="selections"
+      :removable="true"
+      :title="$options.i18n.selectedContextItemsTitle"
+      :default-collapsed="false"
+      class="gl-mb-3"
+      @remove="removeItem"
+    />
+    <gl-card
+      v-if="open"
+      class="slash-commands !gl-absolute gl-bottom-0 gl-w-full gl-pl-0 gl-shadow-md"
+      body-class="!gl-p-2"
+      data-testid="context-item-menu"
+    >
+      <ul v-if="showCategorySelection" data-testid="context-menu-category-items">
+        <!-- Placeholder for GlDuoChatContextItemMenuCategoryItems component coming in a future iteration -->
+        <li v-for="category of categories" :key="category.value" @click="selectCategory(category)">
+          {{ category.label }}
+        </li>
+      </ul>
+      <div v-else data-testid="context-menu-search-items">
+        <!-- Placeholder for GlDuoChatContextItemMenuSearchItem component coming in a future iteration -->
+        <template v-if="loading">Loading...</template>
+        <template v-else-if="error">Error: {{ error }}</template>
+        <ul v-else>
+          <li v-for="result of results" :key="result.id" @click="selectItem(result)">
+            {{ result.metadata.name }} {{ result.isEnabled ? '' : '(disabled)' }}
+          </li>
+        </ul>
+      </div>
+    </gl-card>
+  </div>
+</template>

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

@@ -18,14 +18,23 @@ export default {
     GlPopover,
   },
   props: {
+    /**
+     * The context item to display in the popover.
+     */
     item: {
       type: Object,
       required: true,
     },
+    /**
+     * The target element ID for the popover.
+     */
     target: {
       type: String,
       required: true,
     },
+    /**
+     * The placement of the popover relative to the target.
+     */
     placement: {
       type: String,
       default: 'bottom',

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

@@ -8,6 +8,7 @@ import {
   CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   CONTEXT_ITEM_TYPE_PROJECT_FILE,
 } from '../constants';
+import { contextItemsValidator } from '../utils';
 
 export default {
   name: 'GlDuoChatContextItemSelections',
@@ -17,18 +18,36 @@ export default {
     GlToken,
   },
   props: {
+    /**
+     * Array of selected context items.
+     */
     selections: {
       type: Array,
       required: true,
+      validator: contextItemsValidator,
     },
+    /**
+     * The title to display for the selections.
+     */
     title: {
       type: String,
       required: true,
     },
+    /**
+     * Whether the selections should be collapsed by default.
+     */
     defaultCollapsed: {
       type: Boolean,
       required: true,
     },
+    /**
+     * Whether the selections can be removed.
+     */
+    removable: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -53,6 +72,13 @@ export default {
     toggleCollapse() {
       this.isCollapsed = !this.isCollapsed;
     },
+    onRemoveItem(item) {
+      /**
+       * Emitted when a context item should be removed.
+       * @property {Object} item - The context item to be removed
+       */
+      this.$emit('remove', item);
+    },
   },
 };
 </script>
@@ -75,9 +101,10 @@ export default {
       <gl-token
         v-for="item in selections"
         :key="item.id"
-        :view-only="true"
+        :view-only="!removable"
         variant="default"
         class="gl-mb-2 gl-mr-2"
+        @close="onRemoveItem(item)"
       >
         <div :id="`context-item-${item.id}-${selectionsId}`" class="gl-flex gl-items-center">
           <gl-icon :name="getIconName(item.type)" :size="12" class="gl-mr-1" />

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

@@ -1,3 +1,15 @@
+import {
+  CONTEXT_ITEM_TYPE_ISSUE,
+  CONTEXT_ITEM_TYPE_MERGE_REQUEST,
+  CONTEXT_ITEM_TYPE_PROJECT_FILE,
+} from './constants';
+
+export const MOCK_CATEGORIES = [
+  { label: 'Files', value: CONTEXT_ITEM_TYPE_PROJECT_FILE, icon: 'document' },
+  { label: 'Issues', value: CONTEXT_ITEM_TYPE_ISSUE, icon: 'issues' },
+  { label: 'Merge Requests', value: CONTEXT_ITEM_TYPE_MERGE_REQUEST, icon: 'merge-request' },
+];
+
 export const MOCK_CONTEXT_ITEM_FILE = {
   id: '123e4567-e89b-12d3-a456-426614174000',
   isEnabled: true,
@@ -8,7 +20,7 @@ export const MOCK_CONTEXT_ITEM_FILE = {
       relFilePath: 'src/plants/strawberry.ts',
     },
   },
-  type: 'project_file',
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
 };
 
 export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
@@ -21,7 +33,7 @@ export const MOCK_CONTEXT_ITEM_FILE_DISABLED = {
       relFilePath: '/src/VehicleFoo/motorbike.cs',
     },
   },
-  type: 'project_file',
+  type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
 };
 const mockFiles = [
   MOCK_CONTEXT_ITEM_FILE,
@@ -35,7 +47,7 @@ const mockFiles = [
         relFilePath: '/src/plants/potato.ts',
       },
     },
-    type: 'project_file',
+    type: CONTEXT_ITEM_TYPE_PROJECT_FILE,
   },
   MOCK_CONTEXT_ITEM_FILE_DISABLED,
 ];
@@ -50,20 +62,20 @@ export const MOCK_CONTEXT_ITEM_ISSUE = {
       iid: 1234,
     },
   },
-  type: 'issue',
+  type: CONTEXT_ITEM_TYPE_ISSUE,
 };
 export const MOCK_CONTEXT_ITEM_ISSUE_DISABLED = {
   id: 'c463fb31-2a4c-4f8e-a609-97230ac48ae5',
   isEnabled: false,
   metadata: {
-    name: 'Fix vehicle colours',
+    name: `Fix vehicle colours and make them look real nice and colourful won't that be wonderful wow this issue title is really long I sure hope it's gonna wrap OK`,
     info: {
       project: 'example/vehicle',
       iid: 91011,
     },
   },
   disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: 'issue',
+  type: CONTEXT_ITEM_TYPE_ISSUE,
 };
 
 const mockIssues = [
@@ -78,7 +90,7 @@ const mockIssues = [
         iid: 5678,
       },
     },
-    type: 'issue',
+    type: CONTEXT_ITEM_TYPE_ISSUE,
   },
   MOCK_CONTEXT_ITEM_ISSUE_DISABLED,
 ];
@@ -93,7 +105,7 @@ export const MOCK_CONTEXT_ITEM_MERGE_REQUEST = {
       iid: 1122,
     },
   },
-  type: 'merge_request',
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
 };
 export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
   id: '4eb665fc-e5e1-49b0-9789-2a16964e461a',
@@ -106,7 +118,7 @@ export const MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED = {
     },
   },
   disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-  type: 'merge_request',
+  type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
 };
 
 const mockMergeRequests = [
@@ -122,7 +134,7 @@ const mockMergeRequests = [
       },
     },
     disabledReasons: ['This foo is not available to bar', 'Lorem something something wow?'],
-    type: 'merge_request',
+    type: CONTEXT_ITEM_TYPE_MERGE_REQUEST,
   },
   MOCK_CONTEXT_ITEM_MERGE_REQUEST_DISABLED,
 ];