@gitlab/ui 104.2.0 → 105.0.0

package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue

@@ -1,363 +0,0 @@
-<script>
-/**
- * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
- *
- * Please use the corresponding component in Duo-UI going forward.
- * All future development and maintenance for Duo components should take place in Duo-UI.
- *
- * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
- */
-
-import throttle from 'lodash/throttle';
-import GlIcon from '../../../../../base/icon/icon.vue';
-import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon.vue';
-import { GlTooltipDirective } from '../../../../../../directives/tooltip';
-import GlDuoChatContextItemSelections from '../duo_chat_context/duo_chat_context_item_selections/duo_chat_context_item_selections.vue';
-import GlDuoUserFeedback from '../../../user_feedback/user_feedback.vue';
-import GlFormGroup from '../../../../../base/form/form_group/form_group.vue';
-import GlFormTextarea from '../../../../../base/form/form_textarea/form_textarea.vue';
-import { SafeHtmlDirective as SafeHtml } from '../../../../../../directives/safe_html/safe_html';
-import { MESSAGE_MODEL_ROLES, SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED } from '../../constants';
-import { sprintf, translate, translatePlural } from '../../../../../../utils/i18n';
-import DocumentationSources from '../duo_chat_message_sources/duo_chat_message_sources.vue';
-// eslint-disable-next-line no-restricted-imports
-import { renderDuoChatMarkdownPreview } from '../../markdown_renderer';
-import { CopyCodeElement } from './copy_code_element';
-import { InsertCodeSnippetElement } from './insert_code_snippet_element';
-import { concatUntilEmpty } from './utils';
-import {
-  DUO_CODE_SCRIM_BOTTOM_CLASS,
-  DUO_CODE_SCRIM_OFFSET,
-  DUO_CODE_SCRIM_TOP_CLASS,
-} from './constants';
-
-export const i18n = {
-  MODAL: {
-    TITLE: translate('GlDuoChatMessage.modalTitle', 'Give feedback on GitLab Duo Chat'),
-    ALERT_TEXT: translate(
-      'GlDuoChatMessage.modalAlertText',
-      'GitLab team members cannot view your conversation. Please be as descriptive as possible.'
-    ),
-    DID_WHAT: translate('GlDuoChatMessage.modalDidWhat', 'What were you doing?'),
-    INTERACTION: translate(
-      'GlDuoChatMessage.modalInteraction',
-      'The situation in which you interacted with GitLab Duo Chat.'
-    ),
-    IMPROVE_WHAT: translate(
-      'GlDuoChatMessage.modalImproveWhat',
-      'How could the response be improved?'
-    ),
-    BETTER_RESPONSE: translate(
-      'GlDuoChatMessage.modalBetterResponse',
-      'How the response might better meet your needs.'
-    ),
-    MESSAGE_ERROR: translate('GlDuoChatMessage.modalMessageError', 'Error sending the message'),
-  },
-};
-
-export default {
-  name: 'GlDuoChatMessage',
-  i18n,
-  safeHtmlConfigExtension: {
-    ADD_TAGS: ['copy-code', 'insert-code-snippet'],
-  },
-  components: {
-    DocumentationSources,
-    GlDuoChatContextItemSelections,
-    GlDuoUserFeedback,
-    GlFormGroup,
-    GlFormTextarea,
-    GlIcon,
-    GlAnimatedLoaderIcon,
-  },
-  directives: {
-    SafeHtml,
-    GlTooltip: GlTooltipDirective,
-  },
-  provide() {
-    return {
-      modalTitle: i18n.MODAL.TITLE,
-      modalAlertText: i18n.MODAL.ALERT_TEXT,
-    };
-  },
-  inject: {
-    // Note, we likely might move away from Provide/Inject for this
-    // and only ship the versions that are currently in the default
-    // See https://gitlab.com/gitlab-org/gitlab-ui/-/merge_requests/3953#note_1762834219
-    // for more context.
-    renderGFM: {
-      from: 'renderGFM',
-      default: () => (element) => {
-        element.classList.add('duo-chat-markdown', 'duo-chat-compact-markdown');
-      },
-    },
-    renderMarkdown: {
-      from: 'renderMarkdown',
-      default: () => renderDuoChatMarkdownPreview,
-    },
-  },
-  props: {
-    /**
-     * A message object
-     */
-    message: {
-      type: Object,
-      required: true,
-    },
-    isCancelled: {
-      type: Boolean,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      didWhat: '',
-      improveWhat: '',
-      messageWatcher: null, // imperatively set up watcher on message
-      messageChunks: [],
-      selectedContextItemsDefaultCollapsed: SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED,
-    };
-  },
-  computed: {
-    isChunk() {
-      return typeof this.message.chunkId === 'number';
-    },
-    isNotChunkOrCancelled() {
-      return !this.isChunk || this.isCancelled;
-    },
-    isChunkAndNotCancelled() {
-      return this.isChunk && !this.isCancelled;
-    },
-    isAssistantMessage() {
-      return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.assistant;
-    },
-    isUserMessage() {
-      return this.message.role.toLowerCase() === MESSAGE_MODEL_ROLES.user;
-    },
-    sources() {
-      return this.message.extras?.sources;
-    },
-    hasFeedback() {
-      return this.message.extras?.hasFeedback;
-    },
-    defaultContent() {
-      if (this.message.contentHtml) {
-        return this.message.contentHtml;
-      }
-
-      return this.renderMarkdown(this.message.content);
-    },
-    messageContent() {
-      if (this.isAssistantMessage && this.isChunk) {
-        return this.renderMarkdown(concatUntilEmpty(this.messageChunks));
-      }
-
-      return this.defaultContent || this.renderMarkdown(concatUntilEmpty(this.message.chunks));
-    },
-    renderedError() {
-      return this.renderMarkdown(this.message.errors?.join('; ') || '');
-    },
-    error() {
-      return Boolean(this.message?.errors?.length) && this.message.errors.join('; ');
-    },
-    selectedContextItems() {
-      return this.message.extras?.contextItems || [];
-    },
-    displaySelectedContextItems() {
-      return Boolean(this.selectedContextItems.length);
-    },
-    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() {
-    if (!customElements.get('copy-code')) {
-      customElements.define('copy-code', CopyCodeElement);
-    }
-    if (!customElements.get('insert-code-snippet')) {
-      customElements.define('insert-code-snippet', InsertCodeSnippetElement);
-    }
-  },
-  mounted() {
-    if (this.isAssistantMessage) {
-      // The watcher has to be created imperatively here
-      // to give an opportunity to remove it after
-      // the complete message has arrived
-      this.messageWatcher = this.$watch('message', this.manageMessageUpdate);
-    }
-    this.setChunks();
-    this.hydrateContentWithGFM();
-  },
-  updated() {
-    this.hydrateContentWithGFM();
-  },
-  methods: {
-    setChunks() {
-      if (this.isChunk) {
-        const { chunkId, content } = this.message;
-        this.$set(this.messageChunks, chunkId - 1, content);
-      } else {
-        this.messageChunks = [];
-      }
-    },
-    stopWatchingMessage() {
-      if (this.messageWatcher) {
-        this.messageWatcher(); // Stop watching the message prop
-        this.messageWatcher = null; // Ensure the watcher can't be stopped multiple times
-      }
-    },
-    hydrateContentWithGFM() {
-      if (!this.isChunk && this.$refs.content) {
-        this.$nextTick(this.renderGFM(this.$refs.content));
-      }
-      this.detectScrollableCodeBlocks();
-    },
-    logEvent(e) {
-      this.$emit('track-feedback', {
-        ...e,
-        didWhat: this.didWhat,
-        improveWhat: this.improveWhat,
-        message: this.message,
-      });
-    },
-    manageMessageUpdate() {
-      this.setChunks();
-      if (!this.isChunk) {
-        this.stopWatchingMessage();
-      }
-    },
-    onInsertCodeSnippet(e) {
-      this.$emit('insert-code-snippet', e);
-    },
-    onGetContextItemContent(contextItem) {
-      this.$emit('get-context-item-content', {
-        messageId: this.message.id,
-        contextItem,
-      });
-    },
-    detectScrollableCodeBlocks() {
-      const codeBlocks = document.querySelectorAll('.duo-chat-message pre');
-      codeBlocks.forEach((e) => {
-        if (e.scrollHeight > e.offsetHeight) {
-          e.classList.add(DUO_CODE_SCRIM_BOTTOM_CLASS);
-          e.addEventListener(
-            'scroll',
-            throttle(() => this.toggleScrolling(e), 200)
-          );
-        }
-      });
-    },
-    toggleScrolling(e) {
-      if (e.scrollHeight - e.scrollTop <= e.offsetHeight + DUO_CODE_SCRIM_OFFSET) {
-        e.classList.remove(DUO_CODE_SCRIM_BOTTOM_CLASS);
-      } else {
-        e.classList.add(DUO_CODE_SCRIM_BOTTOM_CLASS);
-      }
-      if (e.scrollTop > DUO_CODE_SCRIM_OFFSET) {
-        e.classList.add(DUO_CODE_SCRIM_TOP_CLASS);
-      } else {
-        e.classList.remove(DUO_CODE_SCRIM_TOP_CLASS);
-      }
-    },
-  },
-};
-</script>
-<template>
-  <div
-    class="duo-chat-message gl-border gl-border-transparent gl-p-4 gl-leading-20 gl-break-anywhere"
-    :class="{
-      'gl-ml-auto gl-rounded-br-none gl-bg-blue-100 gl-text-blue-900': isUserMessage,
-      'gl-rounded-bl-none gl-border-1 gl-border-solid gl-border-gray-50 gl-text-default':
-        isAssistantMessage,
-      'gl-bg-subtle': isAssistantMessage && !error,
-      'duo-chat-message-with-error gl-bg-red-50': error,
-    }"
-    @insert-code-snippet="onInsertCodeSnippet"
-  >
-    <gl-icon
-      v-if="error"
-      :aria-label="$options.i18n.MESSAGE_ERROR"
-      name="status_warning_borderless"
-      :size="16"
-      class="error-icon gl-border gl-mr-3 gl-shrink-0 gl-rounded-full gl-border-red-500 gl-text-red-600"
-      data-testid="error"
-    />
-    <div ref="content-wrapper" :class="{ 'has-error': error }">
-      <gl-duo-chat-context-item-selections
-        v-if="displaySelectedContextItems && isAssistantMessage"
-        :selections="selectedContextItems"
-        :title="selectedContextItemsTitle"
-        :default-collapsed="selectedContextItemsDefaultCollapsed"
-        variant="assistant"
-        @get-content="onGetContextItemContent"
-      />
-      <div
-        v-if="error"
-        ref="error-message"
-        v-safe-html:[$options.safeHtmlConfigExtension]="renderedError"
-      ></div>
-      <div v-else>
-        <div ref="content" v-safe-html:[$options.safeHtmlConfigExtension]="messageContent"></div>
-
-        <template v-if="isAssistantMessage">
-          <documentation-sources v-if="sources" :sources="sources" />
-
-          <div class="duo-chat-message-feedback gl-mt-4 gl-flex gl-items-end">
-            <gl-animated-loader-icon v-if="isChunkAndNotCancelled" :is-on="true" />
-            <gl-duo-user-feedback
-              v-if="isNotChunkOrCancelled"
-              :feedback-received="hasFeedback"
-              :modal-title="$options.i18n.MODAL.TITLE"
-              :modal-alert="$options.i18n.MODAL.ALERT_TEXT"
-              @feedback="logEvent"
-            >
-              <template #feedback-extra-fields>
-                <gl-form-group :label="$options.i18n.MODAL.DID_WHAT" optional>
-                  <gl-form-textarea
-                    v-model="didWhat"
-                    :placeholder="$options.i18n.MODAL.INTERACTION"
-                  />
-                </gl-form-group>
-                <gl-form-group :label="$options.i18n.MODAL.IMPROVE_WHAT" optional>
-                  <gl-form-textarea
-                    v-model="improveWhat"
-                    :placeholder="$options.i18n.MODAL.BETTER_RESPONSE"
-                  />
-                </gl-form-group>
-              </template>
-            </gl-duo-user-feedback>
-          </div>
-        </template>
-      </div>
-      <gl-duo-chat-context-item-selections
-        v-if="displaySelectedContextItems && isUserMessage"
-        :selections="selectedContextItems"
-        :title="selectedContextItemsTitle"
-        :default-collapsed="selectedContextItemsDefaultCollapsed"
-        variant="user"
-        @get-content="onGetContextItemContent"
-      />
-    </div>
-  </div>
-</template>

package/src/components/experimental/duo/chat/components/duo_chat_message/insert_code_snippet_element.js

@@ -1,51 +0,0 @@
-/**
- * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
- *
- * Please use the corresponding component in Duo-UI going forward.
- * All future development and maintenance for Duo components should take place in Duo-UI.
- *
- * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
- */
-
-import { createButton } from './buttons_utils';
-
-const CODE_MARKDOWN_CLASS = 'js-markdown-code';
-
-export class InsertCodeSnippetElement extends HTMLElement {
-  #actionButton;
-
-  #codeBlock;
-
-  constructor(codeBlock) {
-    super();
-    this.#actionButton = createButton();
-
-    // we handle two possible cases here:
-    // 1. we use constructor parameter if the element is created in Javscript and inserted in the document
-    // 2. we find the wrapping element containing code if the element is received from the server
-    this.#codeBlock = codeBlock ?? this.closest(`.${CODE_MARKDOWN_CLASS}`);
-  }
-
-  #handleClick = () => {
-    if (this.#codeBlock) {
-      this.#codeBlock.dispatchEvent(
-        new CustomEvent('insert-code-snippet', {
-          bubbles: true,
-          cancelable: true,
-          detail: {
-            code: this.#codeBlock.textContent.trim(),
-          },
-        })
-      );
-    }
-  };
-
-  connectedCallback() {
-    this.appendChild(this.#actionButton);
-    this.#actionButton.addEventListener('click', this.#handleClick);
-  }
-
-  disconnectedCallback() {
-    this.#actionButton.removeEventListener('click', this.#handleClick);
-  }
-}

package/src/components/experimental/duo/chat/components/duo_chat_message/utils.js

@@ -1,18 +0,0 @@
-/**
- * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
- *
- * Please use the corresponding component in Duo-UI going forward.
- * All future development and maintenance for Duo components should take place in Duo-UI.
- *
- * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
- */
-
-export const concatUntilEmpty = (arr) => {
-  if (!arr) return '';
-
-  let end = arr.findIndex((el) => !el);
-
-  if (end < 0) end = arr.length;
-
-  return arr.slice(0, end).join('');
-};

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.md

@@ -1,10 +0,0 @@
-<!--
-This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
-
-Please use the corresponding component in Duo-UI going forward.
-All future development and maintenance for Duo components should take place in Duo-UI.
-
-For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
--->
-
-A simple component to list documentation sources for a documentation-related AI response messages.

package/src/components/experimental/duo/chat/components/duo_chat_message_sources/duo_chat_message_sources.vue

@@ -1,91 +0,0 @@
-<script>
-/**
- * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
- *
- * Please use the corresponding component in Duo-UI going forward.
- * All future development and maintenance for Duo components should take place in Duo-UI.
- *
- * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
- */
-
-import { translatePlural } from '../../../../../../utils/i18n';
-import GlIcon from '../../../../../base/icon/icon.vue';
-import GlLink from '../../../../../base/link/link.vue';
-import { DOCUMENTATION_SOURCE_TYPES } from '../../constants';
-
-export const i18n = {
-  MESSAGE_SOURCE: (count = 1) =>
-    translatePlural('GlDuoChatMessageSources.messageSources', 'Source', 'Sources')(count),
-};
-
-export default {
-  name: 'GlDuoChatMessageSources',
-  components: {
-    GlIcon,
-    GlLink,
-  },
-  props: {
-    /**
-     * The Array of the message sources.
-     */
-    sources: {
-      type: Array,
-      required: true,
-    },
-  },
-  computed: {
-    sourceLabel() {
-      return i18n.MESSAGE_SOURCE(this.sources.length);
-    },
-  },
-  methods: {
-    getSourceIcon(sourceType) {
-      const currentSourceType = Object.values(DOCUMENTATION_SOURCE_TYPES).find(
-        ({ value }) => value === sourceType
-      );
-
-      return currentSourceType?.icon || 'document';
-    },
-    getSourceTitle({ title, source_type: sourceType, stage, group, date, author }) {
-      if (title) {
-        return title;
-      }
-
-      if (sourceType === DOCUMENTATION_SOURCE_TYPES.DOC.value) {
-        if (stage && group) {
-          return `${stage} / ${group}`;
-        }
-      }
-
-      if (sourceType === DOCUMENTATION_SOURCE_TYPES.BLOG.value) {
-        if (date && author) {
-          return `${date} / ${author}`;
-        }
-      }
-
-      return this.sourceLabel;
-    },
-  },
-};
-</script>
-<template>
-  <div class="gl-mr-3 gl-mt-4 gl-text-gray-600" data-testid="duo-chat-message-sources">
-    <span v-if="sources.length">{{ sourceLabel }}:</span>
-
-    <ul class="gl-m-0 gl-list-none gl-p-0">
-      <li
-        v-for="(source, index) in sources"
-        :key="index"
-        class="gl-flex gl-items-center gl-pt-3"
-        data-testid="source-list-item"
-      >
-        <gl-icon
-          v-if="source.source_type"
-          :name="getSourceIcon(source.source_type)"
-          class="gl-mr-2 gl-shrink-0"
-        />
-        <gl-link :href="source.source_url">{{ getSourceTitle(source) }}</gl-link>
-      </li>
-    </ul>
-  </div>
-</template>

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.md

@@ -1,10 +0,0 @@
-<!--
-This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
-
-Please use the corresponding component in Duo-UI going forward.
-All future development and maintenance for Duo components should take place in Duo-UI.
-
-For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
--->
-
-The component is a simple list of strings representing possible prompts to AI.

package/src/components/experimental/duo/chat/components/duo_chat_predefined_prompts/duo_chat_predefined_prompts.vue

@@ -1,45 +0,0 @@
-<script>
-/**
- * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
- *
- * Please use the corresponding component in Duo-UI going forward.
- * All future development and maintenance for Duo components should take place in Duo-UI.
- *
- * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
- */
-
-import GlButton from '../../../../../base/button/button.vue';
-
-export default {
-  name: 'GlDuoChatPredefinedPrompts',
-  components: {
-    GlButton,
-  },
-  props: {
-    /**
-     * Array of predefined prompts to display. Every prompt should be a string which will be converted into a prompt when clicked.
-     */
-    prompts: {
-      type: Array,
-      required: true,
-    },
-  },
-  methods: {
-    handleClick(prompt) {
-      /**
-       * Emits the prompt string that was clicked.
-       */
-      this.$emit('click', prompt);
-    },
-  },
-};
-</script>
-<template>
-  <div class="gl-text-right">
-    <div v-for="(prompt, index) in prompts" :key="`question-${index}`" class="gl-mt-3">
-      <gl-button category="secondary" variant="confirm" @click="handleClick(prompt)"
-        ><span class="gl-whitespace-normal">{{ prompt }}</span></gl-button
-      >
-    </div>
-  </div>
-</template>

package/src/components/experimental/duo/chat/constants.js

@@ -1,37 +0,0 @@
-/**
- * This component has been migrated to the Duo-UI library (https://gitlab.com/gitlab-org/duo-ui).
- *
- * Please use the corresponding component in Duo-UI going forward.
- * All future development and maintenance for Duo components should take place in Duo-UI.
- *
- * For more details, see the migration epic: https://gitlab.com/groups/gitlab-org/-/epics/15344 or reach out to the Duo-Chat team in #g_duo_chat.
- */
-
-export const CHAT_RESET_MESSAGE = '/reset';
-export const CHAT_CLEAR_MESSAGE = '/clear';
-export const CHAT_INCLUDE_MESSAGE = '/include';
-
-export const LOADING_TRANSITION_DURATION = 7500;
-
-export const DOCUMENTATION_SOURCE_TYPES = {
-  HANDBOOK: {
-    value: 'handbook',
-    icon: 'book',
-  },
-  DOC: {
-    value: 'doc',
-    icon: 'documents',
-  },
-  BLOG: {
-    value: 'blog',
-    icon: 'list-bulleted',
-  },
-};
-
-export const MESSAGE_MODEL_ROLES = {
-  user: 'user',
-  system: 'system',
-  assistant: 'assistant',
-};
-
-export const SELECTED_CONTEXT_ITEMS_DEFAULT_COLLAPSED = true;