@gitlab/duo-ui 0.1.0

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,112 @@
+<script>
+import { nextTick } from 'vue';
+import { GlSkeletonLoader, GlModal, GlSafeHtmlDirective as SafeHtml } 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_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

@@ -0,0 +1,279 @@
+<script>
+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.vue';
+import { categoriesValidator, contextItemsValidator, wrapIndex } from '../utils';
+import GlDuoChatContextItemMenuCategoryItems from './duo_chat_context_item_menu_category_items.vue';
+import GlDuoChatContextItemMenuSearchItems from './duo_chat_context_item_menu_search_items.vue';
+
+const SEARCH_DEBOUNCE_MS = 30;
+
+export default {
+  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;
+        default:
+          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>
+
+<template>
+  <div>
+    <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"
+      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"
+    >
+      <gl-duo-chat-context-item-menu-category-items
+        v-if="showCategorySelection"
+        :active-index="activeIndex"
+        :categories="categories"
+        @select="selectCategory"
+        @active-index-change="activeIndex = $event"
+      />
+      <gl-duo-chat-context-item-menu-search-items
+        v-else
+        v-model="searchQuery"
+        :active-index="activeIndex"
+        :category="selectedCategory"
+        :loading="loading"
+        :error="error"
+        :results="results"
+        @select="selectItem"
+        @keyup="handleKeyUp"
+        @active-index-change="activeIndex = $event"
+      />
+    </gl-card>
+  </div>
+</template>

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

@@ -0,0 +1,44 @@
+<script>
+import { GlDropdownItem, GlIcon } from '@gitlab/ui';
+import { categoriesValidator } from '../utils';
+
+export default {
+  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>
+<template>
+  <ul class="gl-mb-0 gl-list-none gl-pl-0">
+    <gl-dropdown-item
+      v-for="(category, index) in categories"
+      :key="category.value"
+      :class="{ 'active-command': index === activeIndex }"
+      data-testid="category-item"
+      @click="selectCategory(category)"
+    >
+      <div class="gl-flex gl-items-center" @mouseenter="setActiveIndex(index)">
+        <gl-icon :name="category.icon" class="gl-mr-2" />
+        {{ category.label }}
+      </div>
+    </gl-dropdown-item>
+  </ul>
+</template>

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

@@ -0,0 +1,84 @@
+<script>
+import { GlIcon, GlTruncate } from '@gitlab/ui';
+import GlDuoChatContextItemPopover from '../duo_chat_context_item_popover/duo_chat_context_item_popover.vue';
+
+import {
+  categoryValidator,
+  contextItemValidator,
+  formatGitItemSecondaryText,
+  formatIssueId,
+  formatMergeRequestId,
+  getContextItemIcon,
+} from '../utils';
+import {
+  CONTEXT_ITEM_CATEGORY_FILE,
+  CONTEXT_ITEM_CATEGORY_ISSUE,
+  CONTEXT_ITEM_CATEGORY_LOCAL_GIT,
+  CONTEXT_ITEM_CATEGORY_MERGE_REQUEST,
+} from '../constants';
+
+export default {
+  name: 'GlDuoChatContextItemMenuSearchItem',
+  components: { GlTruncate, GlIcon, GlDuoChatContextItemPopover },
+  props: {
+    category: {
+      type: Object,
+      required: true,
+      validator: categoryValidator,
+    },
+    contextItem: {
+      type: Object,
+      required: true,
+      validator: contextItemValidator,
+    },
+  },
+  computed: {
+    title() {
+      return this.contextItem.metadata?.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>
+<template>
+  <div class="gl-flex gl-flex-col">
+    <div class="gl-flex gl-items-center">
+      <gl-icon :name="icon" class="gl-mr-2 gl-shrink-0" data-testid="category-icon" />
+      <gl-truncate :text="title" class="gl-min-w-0" data-testid="item-title" />
+      <gl-icon
+        :id="`info-icon-${contextItem.id}`"
+        name="information-o"
+        class="gl-ml-2 gl-shrink-0 gl-cursor-pointer gl-text-secondary"
+        :size="12"
+      />
+      <gl-duo-chat-context-item-popover
+        :context-item="contextItem"
+        :target="`info-icon-${contextItem.id}`"
+        placement="left"
+      />
+    </div>
+    <div
+      v-if="secondaryText"
+      class="gl-mt-1 gl-shrink-0 gl-whitespace-nowrap gl-text-secondary"
+      data-testid="item-secondary-text"
+    >
+      <gl-truncate :text="secondaryText" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,157 @@
+<script>
+import { GlDropdownItem, GlFormInput, GlAlert } from '@gitlab/ui';
+import { sprintf, translate } from '@gitlab/ui/dist/utils/i18n';
+import { categoryValidator, contextItemsValidator } from '../utils';
+import GlDuoChatContextItemMenuSearchItemsLoading from './duo_chat_context_item_menu_search_items_loading.vue';
+import GlDuoChatContextItemMenuSearchItem from './duo_chat_context_item_menu_search_item.vue';
+
+export default {
+  name: 'GlDuoChatContextItemMenuSearchItems',
+  components: {
+    GlAlert,
+    GlDropdownItem,
+    GlDuoChatContextItemMenuSearchItem,
+    GlDuoChatContextItemMenuSearchItemsLoading,
+    GlFormInput,
+  },
+  model: {
+    prop: 'searchQuery',
+    event: 'update:searchQuery',
+  },
+  props: {
+    activeIndex: {
+      type: Number,
+      required: true,
+    },
+    searchQuery: {
+      type: String,
+      required: true,
+    },
+    category: {
+      type: Object,
+      required: true,
+      validator: categoryValidator,
+    },
+    loading: {
+      type: Boolean,
+      required: true,
+    },
+    error: {
+      type: [String, null],
+      required: false,
+      default: null,
+    },
+    results: {
+      type: Array,
+      required: true,
+      validator: contextItemsValidator,
+    },
+  },
+  data() {
+    return {
+      userInitiatedSearch: false,
+      numLoadingItems: 3,
+    };
+  },
+  computed: {
+    showEmptyState() {
+      return Boolean(
+        this.userInitiatedSearch && !this.loading && !this.error && !this.results.length
+      );
+    },
+    searchInputPlaceholder() {
+      return sprintf(
+        translate('GlDuoChatContextItemMenu.searchInputPlaceholder', 'Search %{categoryLabel}...'),
+        {
+          categoryLabel: this.category.label.toLowerCase(),
+        }
+      );
+    },
+  },
+  watch: {
+    searchQuery() {
+      this.userInitiatedSearch = true;
+    },
+    results(results) {
+      this.numLoadingItems = Math.max(1, results.length);
+    },
+  },
+  methods: {
+    selectItem(contextItem) {
+      this.$emit('select', contextItem);
+      this.userInitiatedSearch = false;
+    },
+    handleKeyUp(e) {
+      this.$emit('keyup', e);
+    },
+    setActiveIndex(index) {
+      if (this.results[index]?.metadata.enabled) {
+        this.$emit('active-index-change', index);
+      }
+    },
+    isActiveItem(contextItem, index) {
+      return index === this.activeIndex && contextItem.metadata.enabled;
+    },
+  },
+  i18n: {
+    emptyStateMessage: translate('GlDuoChatContextItemMenu.emptyStateMessage', 'No results found'),
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="gl-max-h-31 gl-overflow-y-scroll">
+      <gl-duo-chat-context-item-menu-search-items-loading v-if="loading" :rows="numLoadingItems" />
+      <gl-alert
+        v-else-if="error"
+        variant="danger"
+        :dismissible="false"
+        class="gl-m-3"
+        data-testid="search-results-error"
+      >
+        {{ error }}
+      </gl-alert>
+      <div
+        v-else-if="showEmptyState"
+        class="gl-rounded-base gl-p-3 gl-text-center gl-text-secondary"
+        data-testid="search-results-empty-state"
+      >
+        {{ $options.i18n.emptyStateMessage }}
+      </div>
+      <ul v-else class="gl-mb-1 gl-list-none gl-flex-row gl-pl-0">
+        <gl-dropdown-item
+          v-for="(contextItem, index) in results"
+          :id="`dropdown-item-${index}`"
+          :key="contextItem.id"
+          :class="{
+            'active-command': isActiveItem(contextItem, index),
+            'gl-cursor-not-allowed [&>button]:focus-within:!gl-shadow-none':
+              !contextItem.metadata.enabled,
+          }"
+          :tabindex="!contextItem.metadata.enabled ? -1 : undefined"
+          class="duo-chat-context-search-result-item"
+          data-testid="search-result-item"
+          @click="selectItem(contextItem)"
+        >
+          <div @mouseenter="setActiveIndex(index)">
+            <gl-duo-chat-context-item-menu-search-item
+              :context-item="contextItem"
+              :category="category"
+              :class="{ 'gl-text-secondary': !contextItem.metadata.enabled }"
+              data-testid="search-result-item-details"
+            />
+          </div>
+        </gl-dropdown-item>
+      </ul>
+    </div>
+    <gl-form-input
+      ref="contextMenuSearchInput"
+      :value="searchQuery"
+      :placeholder="searchInputPlaceholder"
+      autofocus
+      data-testid="context-menu-search-input"
+      @input="$emit('update:searchQuery', $event)"
+      @keyup="handleKeyUp"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,34 @@
+<script>
+import { translate } from '@gitlab/ui/dist/utils/i18n';
+
+export default {
+  name: 'GlDuoChatContextItemMenuSearchItemsLoading',
+  props: {
+    rows: {
+      type: Number,
+      required: true,
+    },
+  },
+  i18n: {
+    loadingMessage: translate('GlDuoChatContextItemMenu.loadingMessage', 'Loading...'),
+  },
+};
+</script>
+
+<template>
+  <div>
+    <div
+      v-for="index in rows"
+      :key="index"
+      class="gl-mx-3 gl-mb-4 gl-pt-3"
+      data-testid="search-results-loading"
+    >
+      <div class="gl-mb-2 gl-flex">
+        <div class="gl-animate-skeleton-loader gl-mr-3 gl-h-5 gl-w-5 gl-rounded-base"></div>
+        <div class="gl-animate-skeleton-loader gl-h-5 gl-grow gl-rounded-base"></div>
+      </div>
+      <div class="gl-animate-skeleton-loader gl-h-4 gl-w-1/2 gl-rounded-base"></div>
+    </div>
+    <span class="sr-only">{{ $options.i18n.loadingMessage }}</span>
+  </div>
+</template>