@gitlab/ui 104.2.0 → 105.0.0

package/src/components/experimental/duo/chat/components/duo_chat_loader/duo_chat_loader.scss

@@ -1,44 +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.
- */
-
-.duo-chat-loader {
-  @apply gl-flex;
-  @apply gl-text-gray-500;
-
-  .transition {
-    @include gl-prefers-reduced-motion-transition;
-    transition: width 200ms $gl-easing-out-cubic;
-  }
-
-  .text-enter {
-    @apply gl-opacity-0;
-  }
-
-  .text-enter-active {
-    @include gl-prefers-reduced-motion-transition;
-    transition: opacity 400ms $gl-easing-out-cubic; // we intentionally overlap this transition with .text-leave-active by 200ms
-  }
-
-  .text-enter-to {
-    @apply gl-opacity-10;
-  }
-
-  .text-leave {
-    @apply gl-opacity-10;
-  }
-
-  .text-leave-active {
-    @include gl-prefers-reduced-motion-transition;
-    transition: opacity 200ms $gl-easing-out-cubic;
-  }
-
-  .text-leave-to {
-    @apply gl-opacity-0;
-  }
-}

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

@@ -1,112 +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 { translate } from '../../../../../../utils/i18n';
-import GlSprintf from '../../../../../utilities/sprintf/sprintf.vue';
-import GlAnimatedLoaderIcon from '../../../../../base/animated_icon/animated_loader_icon.vue';
-import { LOADING_TRANSITION_DURATION } from '../../constants';
-
-export const i18n = {
-  LOADER_LOADING_MESSAGE: translate(
-    'GlDuoChatLoader.loaderLoadingMessage',
-    '%{tool} is %{transition} an answer'
-  ),
-  LOADER_LOADING_TRANSITIONS: [
-    translate('GlDuoChatLoader.loaderLoadingTransitionsFinding', 'finding'),
-    translate('GlDuoChatLoader.loaderLoadingTransitionsWorkingOn', 'working on'),
-    translate('GlDuoChatLoader.loaderLoadingTransitionsGenerating', 'generating'),
-    translate('GlDuoChatLoader.loaderLoadingTransitionsProducing', 'producing'),
-  ],
-  GITLAB_DUO: translate('GlDuoChatLoader.gitlabDuo', 'GitLab Duo'),
-};
-
-export default {
-  name: 'GlDuoChatLoader',
-  components: {
-    GlSprintf,
-    GlAnimatedLoaderIcon,
-  },
-  i18n,
-  props: {
-    /**
-     * The message containing the name of the current AI tool working on the answer.
-     */
-    toolName: {
-      type: String,
-      required: false,
-      default: i18n.GITLAB_DUO,
-    },
-  },
-  data() {
-    return {
-      loadingSequence: 0,
-      timeout: null,
-    };
-  },
-  beforeDestroy() {
-    clearTimeout(this.timeout);
-  },
-  mounted() {
-    this.computeTransitionWidth();
-    this.enter();
-  },
-  methods: {
-    computeTransitionWidth() {
-      const container = this.$refs.transition;
-      const active = this.$refs.currentTransition[0]; // There's only one `currentTransition` ref at a time, but refs in v-for loops are always Arrays
-      const { width, height } = active.getBoundingClientRect();
-      container.$el.style.width = `${width}px`;
-      container.$el.style.height = `${height}px`;
-    },
-    enter() {
-      clearTimeout(this.timeout);
-      this.timeout = setTimeout(() => {
-        this.loadingSequence =
-          (this.loadingSequence + 1) % this.$options.i18n.LOADER_LOADING_TRANSITIONS.length;
-        this.enter();
-      }, LOADING_TRANSITION_DURATION);
-    },
-    isCurrentTransition(index) {
-      return index === this.loadingSequence;
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="duo-chat-loader gl-mt-5 gl-flex gl-items-center gl-gap-3">
-    <gl-animated-loader-icon :is-on="true" />
-    <div>
-      <gl-sprintf :message="$options.i18n.LOADER_LOADING_MESSAGE">
-        <template #tool>
-          <strong data-testid="tool">{{ toolName }}</strong>
-        </template>
-        <template #transition>
-          <transition-group
-            ref="transition"
-            name="text"
-            class="transition gl-relative gl-inline-block gl-align-bottom"
-            @after-leave="computeTransitionWidth"
-          >
-            <span
-              v-for="(message, index) in $options.i18n.LOADER_LOADING_TRANSITIONS"
-              v-show="isCurrentTransition(index)"
-              :ref="isCurrentTransition(index) ? 'currentTransition' : ''"
-              :key="message"
-              :data-testid="isCurrentTransition(index) ? 'current-transition' : ''"
-              class="gl-absolute gl-bottom-0 gl-left-0 gl-whitespace-nowrap"
-              >{{ message }}</span
-            >
-          </transition-group>
-        </template>
-      </gl-sprintf>
-    </div>
-  </div>
-</template>

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

@@ -1,39 +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 iconsPath from '@gitlab/svgs/dist/icons.svg';
-
-export const createButton = (title = 'Insert the code snippet', iconId = 'insert') => {
-  const button = document.createElement('button');
-  button.type = 'button';
-  button.classList.add(
-    'btn',
-    'btn-default',
-    'btn-md',
-    'gl-button',
-    'btn-default-secondary',
-    'btn-icon'
-  );
-  button.dataset.title = title;
-
-  // Create an SVG element with the correct namespace
-  const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-  svg.setAttribute('role', 'img');
-  svg.setAttribute('aria-hidden', 'true');
-  svg.classList.add('gl-button-icon', 'gl-icon', 's16');
-
-  // Create a 'use' element with the correct namespace
-  const use = document.createElementNS('http://www.w3.org/2000/svg', 'use');
-  use.setAttribute('href', `${iconsPath}#${iconId}`);
-
-  svg.appendChild(use);
-  button.appendChild(svg);
-
-  return button;
-};

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

@@ -1,12 +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 DUO_CODE_SCRIM_TOP_CLASS = 'scrim-top';
-export const DUO_CODE_SCRIM_BOTTOM_CLASS = 'scrim-bottom';
-export const DUO_CODE_SCRIM_OFFSET = 16;

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

@@ -1,24 +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';
-
-export class CopyCodeElement extends HTMLElement {
-  constructor() {
-    super();
-    const btn = createButton('Copy to clipboard', 'copy-to-clipboard');
-    const wrapper = this.parentNode;
-
-    this.appendChild(btn);
-    btn.addEventListener('click', async () => {
-      const textToCopy = wrapper.innerText;
-      await navigator.clipboard.writeText(textToCopy);
-    });
-  }
-}

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

@@ -1,69 +0,0 @@
-The component represents a Duo Chat message.
-
-## Usage
-
-```html
-<gl-duo-chat-message :message="message" />
-```
-
-## Pretty rendering message content
-
-There are two ways of pretty-rendering a message's content in the component:
-
-- dependency injection, providing functions to convert raw markdown into HTML,
-- sending `contentHtml` prop as part of the `message` property
-
-The component ships a default markdown renderer based on `marked`. It should produce
-reasonably well-looking results while streaming messages. The implementation can be found
-[here](https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/src/components/experimental/duo/chat/markdown_renderer.js).
-
-### Injecting functions
-
-To inject the `renderMarkdown` function, which converts raw markdown into proper HTML,
-the component relies on [dependency injection, using `provide`/`inject` options](https://docs.gitlab.com/ee/development/fe_guide/vue.html#provide-and-inject).
-The component expects a reference to a function, converting raw markdown into HTML
-to be _provided_ by a consumer.
-[The example implementation](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/notes/utils.js#L22-24)
-
-### `contentHtml`
-
-This approach is self-explanatory and is used when raw markdown can be converted to HTML on the server
-before the message is returned to the client. Here's an example of a message's structure where markdown
-has been generated on the server and sent down in the `contentHtml` property:
-
-```javascript
-{
-  content: '_Duo Chat message_ coming from AI',
-  contentHtml: '<p><em>Duo Chat message</em> coming from AI</p>',
-  role: 'assistant',
-  ...
-}
-```
-
-## GitLab Flavored Markdown (GLFM)
-
-In most cases, it's not enough to just convert raw markdown into HTML. Messages also require the
-markup to support [GitLab Flavored Markdown (GLFM)](https://docs.gitlab.com/ee/user/markdown.html).
-For this, the component relies on another dependency injection (in addition to `renderMarkdown`)
-expecting a reference to the `renderGFM` function, decorating an HTML element with GLFM to be
-_provided_ by a consumer.
-[The example implementation](https://gitlab.com/gitlab-org/gitlab/-/blob/master/app/assets/javascripts/behaviors/markdown/render_gfm.js#L19-52)
-
-## The underlying use of the `GlDuoUserFeedback` component
-
-The component integrates the [`GlDuoUserFeedback`](/story/experimental-duo-user-feedback--default)
-component to track user feedback on the AI-generated responses. Note that the `GlDuoChatMessage`
-component renders the default state of `GlDuoUserFeedback` component, not allowing to override
-the slots in that underlying component.
-
-### Tracking User Feedback for a response
-
-The component emits the `track-feedback` event, a proxy of the `feedback` event emitted by
-the `GlDuoUserFeedback` component. Please refer to
-[the documentation on that component](/story/experimental-duo-user-feedback--docs#listening-to-the-feedback-form-submission)
-when processing feedback from users.
-
-## Included context references
-
-Messages will display any included context references (files, issues merge requests etc.) when
-the message `meta.contextItems` array contains valid items.

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

@@ -1,105 +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 '../../variables';
-
-.duo-chat-message {
-  max-width: 90%;
-  position: relative;
-  border-radius: px-to-rem(20px);
-
-  &:not(:last-child) {
-    @apply gl-mb-4;
-  }
-
-  code {
-    @apply gl-bg-gray-100;
-  }
-
-  pre {
-    box-shadow: none !important;
-    @apply gl-border gl-max-h-[60vh] gl-px-4 gl-py-3 gl-text-inherit;
-
-    &::before,
-    &::after {
-      content: '';
-      left: $gl-border-size-1;
-      width: calc(100% - calc(2 * $gl-border-size-1));
-      position: absolute;
-      @apply gl-pointer-events-none gl-h-7 gl-rounded-b-base;
-    }
-
-    &.scrim-top {
-      &::before {
-        background: $duo-chat-scrim-gradient;
-        top: $gl-border-size-1;
-        @apply -gl-rotate-180;
-      }
-    }
-
-    &.scrim-bottom {
-      &::after {
-        background: $duo-chat-scrim-gradient;
-        bottom: $gl-border-size-1;
-      }
-    }
-  }
-
-  pre code {
-    @apply gl-text-sm;
-    @apply gl-leading-1;
-    @apply gl-bg-transparent;
-    white-space: inherit;
-  }
-
-  p:last-of-type {
-    @apply gl-mb-0;
-  }
-
-  copy-code,
-  insert-code-snippet {
-    position: absolute;
-    @apply gl-transition-all;
-    @apply gl-opacity-0;
-    right: $gl-spacing-scale-3;
-    top: $gl-spacing-scale-3;
-  }
-
-  copy-code {
-    margin-right: $gl-spacing-scale-8;
-  }
-
-  .js-markdown-code.markdown-code-block:hover {
-    copy-code,
-    copy-code:focus-within,
-    insert-code-snippet,
-    insert-code-snippet:focus-within {
-      @apply gl-opacity-10;
-    }
-  }
-
-  .has-error {
-    margin-left: $gl-spacing-scale-6;
-  }
-
-  .error-icon {
-    top: 14px;
-    position: absolute;
-  }
-}
-
-.insert-code-hidden {
-  insert-code-snippet {
-    display: none;
-  }
-
-  copy-code {
-    margin-right: 0;
-  }
-}