@gitlab/duo-ui 0.1.0 → 0.3.0

package/CHANGELOG.md

@@ -0,0 +1,8 @@
+# [0.3.0](https://gitlab.com/gitlab-org/duo-ui/compare/v0.2.0...v0.3.0) (2024-11-04)
+
+
+### Features
+
+* Update Duo Components to match GitLab UI v100.0.0 ([1f21667](https://gitlab.com/gitlab-org/duo-ui/commit/1f216677c435923c845228901b513cbaf02df433))
+
+# [0.2.0](https://gitlab.com/gitlab-org/duo-ui/compare/v0.1.0...v0.2.0) (2024-10-25)

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

@@ -0,0 +1,11 @@
+const CONTEXT_ITEM_CATEGORY_ISSUE = 'issue';
+const CONTEXT_ITEM_CATEGORY_MERGE_REQUEST = 'merge_request';
+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, LANGUAGE_IDENTIFIER_DIFF, LANGUAGE_IDENTIFIER_PLAINTEXT, LANGUAGE_IDENTIFIER_PREFIX };

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

@@ -0,0 +1,118 @@
+import { nextTick } from 'vue';
+import { GlSkeletonLoader, GlModal, GlSafeHtmlDirective } from '@gitlab/ui';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { contextItemValidator } from '../utils';
+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: GlSafeHtmlDirective
+  },
+  inject: {
+    renderGFM: {
+      from: 'renderGFM',
+      default: () => element => {
+        element.classList.add('duo-chat-markdown', 'duo-chat-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/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu.js

@@ -0,0 +1,265 @@
+import debounce from 'lodash/debounce';
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+import { GlCard } from '@gitlab/ui';
+import GlDuoChatContextItemSelections from '../duo_chat_context_item_selections/duo_chat_context_item_selections';
+import { contextItemsValidator, categoriesValidator, wrapIndex } from '../utils';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items';
+import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+const SEARCH_DEBOUNCE_MS = 30;
+var script = {
+  name: 'GlDuoChatContextItemMenu',
+  components: {
+    GlCard,
+    GlDuoChatContextItemMenuCategoryItems,
+    GlDuoChatContextItemMenuSearchItems,
+    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,
+      searchQuery: '',
+      activeIndex: 0
+    };
+  },
+  computed: {
+    showCategorySelection() {
+      return this.open && !this.selectedCategory;
+    },
+    allResultsAreDisabled() {
+      return this.results.every(result => !result.metadata.enabled);
+    }
+  },
+  watch: {
+    open(isOpen) {
+      if (!isOpen) {
+        this.resetSelection();
+      }
+    },
+    searchQuery(query) {
+      this.debouncedSearch(query);
+    },
+    results(newResults) {
+      const firstEnabledIndex = newResults.findIndex(result => result.metadata.enabled);
+      this.activeIndex = firstEnabledIndex >= 0 ? firstEnabledIndex : 0;
+    }
+  },
+  methods: {
+    selectCategory(category) {
+      this.searchQuery = '';
+      this.selectedCategory = category;
+      this.$emit('search', {
+        category: category.value,
+        query: ''
+      });
+    },
+    debouncedSearch: debounce(function search(query) {
+      /**
+       * 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: this.selectedCategory.value,
+        query
+      });
+    }, SEARCH_DEBOUNCE_MS),
+    selectItem(item) {
+      if (!item.metadata.enabled) {
+        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;
+      this.searchQuery = '';
+      this.activeIndex = 0;
+    },
+    async scrollActiveItemIntoView() {
+      await this.$nextTick();
+      const activeItem = document.getElementById(`dropdown-item-${this.activeIndex}`);
+      if (activeItem) {
+        activeItem.scrollIntoView({
+          block: 'nearest',
+          inline: 'start'
+        });
+      }
+    },
+    handleKeyUp(e) {
+      switch (e.key) {
+        case 'ArrowDown':
+        case 'ArrowUp':
+          e.preventDefault();
+          this.moveActiveIndex(e.key === 'ArrowDown' ? 1 : -1);
+          this.scrollActiveItemIntoView();
+          break;
+        case 'Enter':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.selectCategory(this.categories[this.activeIndex]);
+            return;
+          }
+          if (!this.results.length) {
+            return;
+          }
+          this.selectItem(this.results[this.activeIndex]);
+          break;
+        case 'Escape':
+          e.preventDefault();
+          if (this.showCategorySelection) {
+            this.$emit('close');
+            return;
+          }
+          this.selectedCategory = null;
+
+          /**
+           * Emitted when the parent GlDuoChat component should refocus on the main prompt input
+           */
+          this.$emit('focus-prompt');
+          break;
+      }
+    },
+    moveActiveIndex(step) {
+      if (this.showCategorySelection) {
+        // Categories cannot be disabled, so just loop to the next/prev one
+        this.activeIndex = wrapIndex(this.activeIndex, step, this.categories.length);
+        return;
+      }
+
+      // Return early if there are no results or all results are disabled
+      if (!this.results.length || this.allResultsAreDisabled) {
+        return;
+      }
+
+      // contextItems CAN be disabled, so loop to next/prev but ensure we don't land on a disabled one
+      let newIndex = this.activeIndex;
+      do {
+        newIndex = wrapIndex(newIndex, step, this.results.length);
+        if (newIndex === this.activeIndex) {
+          // If we've looped through all items and found no enabled ones, keep the current index
+          return;
+        }
+      } 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: {
+    selectedContextItemsTitle: translate('GlDuoChatContextItemMenu.selectedContextItemsTitle', 'Included references')
+  }
+};
+
+/* 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,"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 */
+  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/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_category_items.js

@@ -0,0 +1,68 @@
+import { GlIcon, GlDropdownItem } from '@gitlab/ui';
+import { categoriesValidator } from '../utils';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatContextItemMenuCategoryItems',
+  components: {
+    GlIcon,
+    GlDropdownItem
+  },
+  props: {
+    categories: {
+      type: Array,
+      required: true,
+      validator: categoriesValidator
+    },
+    activeIndex: {
+      type: Number,
+      required: true
+    }
+  },
+  methods: {
+    selectCategory(category) {
+      this.$emit('select', category);
+    },
+    setActiveIndex(index) {
+      this.$emit('active-index-change', index);
+    }
+  }
+};
+
+/* 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('ul',{staticClass:"gl-mb-0 gl-list-none gl-pl-0"},_vm._l((_vm.categories),function(category,index){return _c('gl-dropdown-item',{key:category.value,class:{ 'active-command': index === _vm.activeIndex },attrs:{"data-testid":"category-item"},on:{"click":function($event){return _vm.selectCategory(category)}}},[_c('div',{staticClass:"gl-flex gl-items-center",on:{"mouseenter":function($event){return _vm.setActiveIndex(index)}}},[_c('gl-icon',{staticClass:"gl-mr-2",attrs:{"name":category.icon}}),_vm._v("\n      "+_vm._s(category.label)+"\n    ")],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/chat/components/duo_chat_context/duo_chat_context_item_menu/duo_chat_context_item_menu_search_item.js

@@ -0,0 +1,87 @@
+import { GlTruncate, GlIcon } from '@gitlab/ui';
+import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover';
+import { categoryValidator, contextItemValidator, formatGitItemSecondaryText, formatMergeRequestId, formatIssueId, getContextItemIcon } from '../utils';
+import { CONTEXT_ITEM_CATEGORY_LOCAL_GIT, CONTEXT_ITEM_CATEGORY_MERGE_REQUEST, CONTEXT_ITEM_CATEGORY_ISSUE, CONTEXT_ITEM_CATEGORY_FILE } from '../constants';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'GlDuoChatContextItemMenuSearchItem',
+  components: {
+    GlTruncate,
+    GlIcon,
+    GlDuoChatContextItemPopover
+  },
+  props: {
+    category: {
+      type: Object,
+      required: true,
+      validator: categoryValidator
+    },
+    contextItem: {
+      type: Object,
+      required: true,
+      validator: contextItemValidator
+    }
+  },
+  computed: {
+    title() {
+      var _this$contextItem$met;
+      return ((_this$contextItem$met = this.contextItem.metadata) === null || _this$contextItem$met === void 0 ? void 0 : _this$contextItem$met.title) || '';
+    },
+    secondaryText() {
+      switch (this.category.value) {
+        case CONTEXT_ITEM_CATEGORY_FILE:
+          return this.contextItem.metadata.relativePath;
+        case CONTEXT_ITEM_CATEGORY_ISSUE:
+          return formatIssueId(this.contextItem.metadata.iid);
+        case CONTEXT_ITEM_CATEGORY_MERGE_REQUEST:
+          return formatMergeRequestId(this.contextItem.metadata.iid);
+        case CONTEXT_ITEM_CATEGORY_LOCAL_GIT:
+          return formatGitItemSecondaryText(this.contextItem);
+        default:
+          return '';
+      }
+    },
+    icon() {
+      return getContextItemIcon(this.contextItem, this.category);
+    }
+  }
+};
+
+/* 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"},[_c('div',{staticClass:"gl-flex gl-items-center"},[_c('gl-icon',{staticClass:"gl-mr-2 gl-shrink-0",attrs:{"name":_vm.icon,"data-testid":"category-icon"}}),_vm._v(" "),_c('gl-truncate',{staticClass:"gl-min-w-0",attrs:{"text":_vm.title,"data-testid":"item-title"}}),_vm._v(" "),_c('gl-icon',{staticClass:"gl-ml-2 gl-shrink-0 gl-cursor-pointer gl-text-secondary",attrs:{"id":("info-icon-" + (_vm.contextItem.id)),"name":"information-o","size":12}}),_vm._v(" "),_c('gl-duo-chat-context-item-popover',{attrs:{"context-item":_vm.contextItem,"target":("info-icon-" + (_vm.contextItem.id)),"placement":"left"}})],1),_vm._v(" "),(_vm.secondaryText)?_c('div',{staticClass:"gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary",attrs:{"data-testid":"item-secondary-text"}},[_c('gl-truncate',{attrs:{"text":_vm.secondaryText}})],1):_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__;